angular - 如何以 Angular 动态命名元素

Question

我想从数组中动态创建组件。 #cmp1、#cmp2、#cmp3 应该是动态的如何实现

 <my-component #cmp1></my-component> 
 <my-component #cmp2></my-component> 
 <my-component #cmp3></my-component> 

 componentList: string[] = ['cmp1', 'cmp2', 'cmp3']

而且我必须在运行时根据字符串值动态获取这些组件

 let reqiuredComponent = 'cmp2'
 let captureComponent: MyComponent = @ViewChild(requiredComponent)

Answer 1

这也可以在不分配动态模板引用 [#cp1, #cp2 ...] 的情况下实现。

在您的 .html

<div #container>
 <ng-container #main></ng-container>
</div>

在你的.ts

  @ViewChild('main', {read: ViewContainerRef}) vcr: ViewContainerRef;
  @ViewChild('container') container: ElementRef;

  constructor(private cfr: ComponentFactoryResolver,
              private el: ElementRef) {}

  ngAfterViewInit() { 
    for(let i=0; i<3; i++) {
      this.vcr.createComponent(this.cfr.resolveComponentFactory(MyComponent)); 
    }           
  }

现在访问您的不同组件

console.log(this.container.nativeElement.childNodes[1]     //childNodes[0|1|2]

像这样，您可以评估 ElementRef 的所有功能，例如 ...childNodes[0].innerHTML