sách gpt4 ăn đã đi

根中的Angular2动态组件注入(inject)

In lại 作者:太空狗 更新时间:2023-10-29 17:02:41 24 4
mua khóa gpt4 giày nike

câu hỏi

我正在寻找将已知/定义的组件注入(inject)应用程序的根并将 @Input() 选项投影到该组件的最佳方法。

Yêu cầu

这对于在应用程序主体中创建模态/工具提示之类的东西是必要的,这样 overflow:hidden/etc 就不会扭曲位置或将其完全切断。

研究

我发现我可以获得 ApplicationRef,然后巧妙地向上遍历并找到 ViewContainerRef

constructor(private applicationRef: ApplicationRef) {
}

getRootViewContainerRef(): ViewContainerRef {
return this.applicationRef['_rootComponents'][0]['_hostElement'].vcRef;
}

一旦我有了它,我就可以像这样在 ref 上调用 createComponent:

appendNextToLocation(componentClass: Type, location: ViewContainerRef): ComponentRef {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
const parentInjector = location.parentInjector;
return location.createComponent(componentFactory, location.length, parentInjector);
}

但是现在我已经创建了组件,但是我的 Đầu vào 属性都没有实现。为了实现这一点,我必须手动遍历我的选项并将它们设置为 appendNextToLocation 实例的结果,例如:

const props = Object.getOwnPropertyNames(options);
for(const prop of props) {
component.instance[prop] = options[prop];
}

现在我确实意识到您可以做一些 DI 来注入(inject)选项,但这使得它在尝试用作普通组件时无法重复使用。这是供引用的样子:

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(ComponentClass);
let parentInjector = location.parentInjector;

let providers = ReflectiveInjector.resolve([
{ provide: ComponentOptionsClass, useValue: options }
]);

childInjector = ReflectiveInjector.fromResolvedProviders(providers, parentInjector);

return location.createComponent(componentFactory, location.length, childInjector);

综上所述,以上所有实际上都有效,但有时感觉有点老套。我还担心像上面那样设置输入属性的生命周期时间,因为它发生在创建之后。

著名引用文献

câu trả lời hay nhất

在 2.3.0 中,引入了 attachView,它允许您能够将更改检测附加到 ApplicationRef,但是,您仍然需要手动将元素附加到根容器。这是因为对于 Angular2,其运行环境的可能性可能是 web workers、universal、nativescript 等,因此我们需要明确地告诉它我们希望将其添加到 View 的位置/方式。

下面是一个示例服务,它允许您动态插入组件并自动投影组件的 Đầu vào

nhập khẩu {
ApplicationRef, ComponentFactoryResolver, ComponentRef, Injectable,
Injector, ViewContainerRef, EmbeddedViewRef, Type
} from '@angular/core';

/**
* Injection service is a helper to append components
* dynamically to a known location in the DOM, most
* noteably for dialogs/tooltips appending to body.
*
* @export
* @class InjectionService
*/
@Injectable()
export class InjectionService {
private _container: ComponentRef;

constructor(
private applicationRef: ApplicationRef,
private componentFactoryResolver: ComponentFactoryResolver,
private injector: Injector) {
}

/**
* Gets the root view container to inject the component to.
*
* @returns {ComponentRef}
*
* @memberOf InjectionService
*/
getRootViewContainer(): ComponentRef {
if(this._container) return this._container;

const rootComponents = this.applicationRef['_rootComponents'];
if (rootComponents.length) return rootComponents[0];

throw new Error('View Container not found! ngUpgrade needs to manually set this via setRootViewContainer.');
}

/**
* Overrides the default root view container. This is useful for
* things like ngUpgrade that doesn't have a ApplicationRef root.
*
* @param {any} container
*
* @memberOf InjectionService
*/
setRootViewContainer(container): void {
this._container = container;
}

/**
* Gets the html element for a component ref.
*
* @param {ComponentRef} componentRef
* @returns {HTMLElement}
*
* @memberOf InjectionService
*/
getComponentRootNode(componentRef: ComponentRef): HTMLElement {
return (componentRef.hostView as EmbeddedViewRef).rootNodes[0] as HTMLElement;
}

/**
* Gets the root component container html element.
*
* @returns {HTMLElement}
*
* @memberOf InjectionService
*/
getRootViewContainerNode(): HTMLElement {
return this.getComponentRootNode(this.getRootViewContainer());
}

/**
* Projects the inputs onto the component
*
* @param {ComponentRef} component
* @param {*} options
* @returns {ComponentRef}
*
* @memberOf InjectionService
*/
projectComponentInputs(component: ComponentRef, options: any): ComponentRef {
if(options) {
const props = Object.getOwnPropertyNames(options);
for(const prop of props) {
component.instance[prop] = options[prop];
}
}

return component;
}

/**
* Appends a component to a adjacent location
*
* @template T
* @param {Type} componentClass
* @param {*} [options={}]
* @param {Element} [location=this.getRootViewContainerNode()]
* @returns {ComponentRef}
*
* @memberOf InjectionService
*/
appendComponent(
componentClass: Type,
options: any = {},
location: Element = this.getRootViewContainerNode()): ComponentRef {

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
let componentRef = componentFactory.create(this.injector);
let appRef: any = this.applicationRef;
let componentRootNode = this.getComponentRootNode(componentRef);

// project the options passed to the component instance
this.projectComponentInputs(componentRef, options);

appRef.attachView(componentRef.hostView);

componentRef.onDestroy(() => {
appRef.detachView(componentRef.hostView);
});

location.appendChild(componentRootNode);

return componentRef;
}
}

关于根中的Angular2动态组件注入(inject),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39857222/

24 4 0
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress