Question

我的Angular 6服务动态创建一个组件：

buildComponent(viewContainerRef) {
  const factory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
  const componentRef = viewContainerRef.createComponent(componentFactory);
  ...
}

我正在创建的组件在其构造函数中需要viewContainerRef的句柄。创建组件时如何从服务中传递它？有没有一种方法可以定制执行createComponent时使用的注射器？（提示：我注意到injector是createComponent的参数之一）

我试图将容器传递给下一行中的组件，例如：

componentRef.instance.viewContainer = viewContainerRef;

这对我不起作用，因为如果可能的话，我需要容器引用在构造后立即可用。

Answer 1

我成功创建了一个定制的注入器，并将其作为viewContainerRef.createComponent的第三个参数提供。这是我的服务代码：

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

buildComponent(viewContainerRef) {
  const inj: Injector = this.makeCustomInjector(viewContainerRef);
  const factory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
  const componentRef = viewContainerRef.createComponent(componentFactory, undefined, inj);
}

makeCustomInjector(viewContainerRef) {
  return Injector.create({
    providers: [{provide: ViewContainerRef, useValue: viewContainer}],
    parent: this.injector
  });
}

现在MyComponent父Injector具有我想要的viewContainerRef。为了能够将该视图容器注入到组件中，最后一步是告诉组件忽略其自己的注入器并从其父项中获取。这是MyComponent构造函数：

constructor(@SkipSelf() viewContainerRef: ViewContainerRef){}

SkipSelf来自@angular/core

角度6：具有自定义提供程序的ViewContainerRef.createComponent

1 个答案: