![](https://i-blog.csdnimg.cn/blog_migrate/e1986082db4084aa9ca9a35d56609427.png)
在我最近关于动态组件实例化的文章中, 这是您需要了解的有关Angular中动态组件的知识,我展示了如何动态地将子组件添加到父组件视图中。 使用ViewContainerRef参考将所有动态组件插入模板中的特定位置。 通常通过在父组件模板中指定一些模板引用变量,然后在组件内部使用诸如ViewChild之类的查询来获取该引用。
假设我们有父级App组件,并且想将子级A组件添加到模板中的特定位置。 这是我们的方法。
组件
我们正在创建一个组件
@Component({ selector: 'a-comp', template: ` <span>I am A component</span> `, }) export class AComponent { }
应用根模块
然后在声明和entryComponents中进行注册:
@NgModule({ imports: [BrowserModule], declarations: [AppComponent, AComponent ], entryComponents: [ AComponent ], bootstrap: [AppComponent] }) export class AppModule { }
应用程序组件
然后在父级App组件中放入创建A组件实例的代码并将其插入
@Component({ moduleId: module.id, selector: 'my-app', template: ` <h1>I am parent App component</h1> <div class="insert-a-component-inside"> <ng-container #vc></ng-container> </div> `, }) export class AppComponent { @ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef; constructor(private r: ComponentFactoryResolver) {} ngAfterViewInit() { const factory = this.r.resolveComponentFactory(AComponent); this.vc.createComponent(factory); } }
这是工作中的小伙子 。 如果您不了解这些内容,建议您阅读开始时提到的文章。
这一切都很好,但是这种方法有一个局限性。 我们必须等到对ViewChild查询进行评估,并且在更改检测期间发生这种情况。 我们只能在ngAfterViewInit生命周期挂钩之后才能访问引用。 但是,如果我们不想等到Angular运行变更检测并希望在变更检测之前拥有完整的组件视图怎么办? 事实证明,我们可以使用指令而不是模板引用和ViewChild查询来实现。
使用指令代替ViewChild查询
每个指令都可以将对ViewContainerRef的引用注入到构造函数中。 这将是对与指令宿主元素关联并锚定的视图容器的引用。 因此,让我们实现这样的指令:
import { Directive, Inject, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[app-component-container]', }) export class AppComponentContainer { constructor(vc: ViewContainerRef) { vc.constructor.name === "ViewContainerRef_"; // true } }
我已经在构造函数中添加了检查,以确保在实例化指令时视图容器可用。 现在,我们需要在App组件模板中使用它,而不要在#vc模板参考中使用它:
<div class="insert-a-component-inside"> <ng-container app-component-container ></ng-container> </div>
如果运行它,您会发现它运行正常。 太好了,我们现在知道指令如何在更改检测之前可以访问视图容器。 现在,它需要以某种方式将其传递给组件。 我们该怎么做? 好吧,指令可以注入父组件并直接在组件上调用方法。 但是,存在一个局限性,该指令必须知道父组件的名称或使用此处描述的方法。
更好的替代方法是使用组件及其子指令之间共享的服务,并通过它进行通信! 我们可以直接在组件上实现该服务以使其本地化。 为了简单起见,我还将使用自定义字符串标记:
const AppComponentService= { createListeners: [], destroyListeners: [], onContainerCreated(fn) { this.createListeners.push(fn); }, onContainerDestroyed(fn) { this.destroyListeners.push(fn); }, registerContainer(container) { this.createListeners.forEach((fn) => { fn(container); }) }, destroyContainer(container) { this.destroyListeners.forEach((fn) => { fn(container); }) } };
@Component({ providers: [ { provide: 'app-component-service' , useValue: AppComponentService } ], ... }) export class AppComponent {
该服务仅实现原始的发布/订阅模式,并在容器注册时通知订阅。
现在,我们可以将该服务注入AppComponentContainer指令并注册视图容器:
export class AppComponentContainer { constructor(vc: ViewContainerRef, @Inject('app-component-service') shared) { shared.registerContainer(vc); } }
剩下的唯一事情就是在注册容器时侦听App组件,并使用它动态创建组件:
export class AppComponent { vc: ViewContainerRef; constructor(private r: ComponentFactoryResolver, @Inject( 'app-component-service' ) shared) { shared.onContainerCreated((container) => { this.vc = container; const factory = this.r.resolveComponentFactory(AComponent); this.vc.createComponent(factory); }); shared.onContainerDestroyed(() => { this.vc = undefined; }) } }
这是the子 。 就是这样。 您可以看到我们不再需要ViewChild查询。 而且,如果添加ngOnInit生命周期挂钩,您将看到A组件在触发之前已呈现。
您发现文章中的信息有帮助吗?
![](https://i-blog.csdnimg.cn/blog_migrate/cdebfbb1bd6beedce00ba0f00d79cfed.gif)