这是在评估@ViewChild查询之前如何获取ViewContainerRef的方法

在我最近关于动态组件实例化的文章中， 这是您需要了解的有关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组件在触发之前已呈现。

您发现文章中的信息有帮助吗？

From: https://hackernoon.com/here-is-how-to-get-viewcontainerref-before-viewchild-query-is-evaluated-f649e51315fb