代码之家 › 专栏 › 技术社区 › BeetleJuice

角度6:ViewContainerRef.createComponent和自定义提供程序

angular

0

BeetleJuice · 技术社区 · 7 年前

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

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

我正在创建的组件需要一个句柄 viewContainerRef 在它的构造器中。如何在创建组件时从服务传递它?是否有方法可以定制在以下情况下使用的喷油器 createComponent 执行?(提示:我注意到 injector 是 创建组件 )

我试图将容器传递到下一行的组件,方法如下:

componentRef.instance.viewContainer = viewContainerRef;

但这对我不起作用,因为如果可能的话,我需要容器引用在构建时立即可用。

1 回复 | 直到 7 年前

1

BeetleJuice 7 年前

我成功地创建了一个自定义注入器,并将其作为 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 父注入器有我想要的viewcainerref。要将视图容器注入到组件中,最后一步是告诉组件忽略自己的注入器并从其父级获取。这是 支链成分 施工单位:

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

滑雪者来自 @angular/core