Angular 4 访问没有模板局部变量的模板元素

Question

我有一个父组件（比如 ParentComponent），我需要添加许多子组件（比如 ChildComponent1、ChildComponent2、... ChildComponentN）它 动态地 。每个组件都不同。

我按照这个来解决我的问题：

但是为了访问模板元素（一个简单的 <div>）来保存我的 ChildComponent 到 @ViewChild，我需要在这个 [= 上设置一个模板局部变量=15=]元素.

但是，在我的例子中，我不能那样做，因为我不能用动态名称设置模板局部变量。所以我的 <div> 元素仅以动态添加的唯一 id 属性为特征（如 <div id="child1">）。

有没有办法通过打字稿中的组件实现访问我的 <div> 元素 而无需模板局部变量？

Answer 1

我想你可以创建一个指令 mydir 来公开一个元素：

@Directive({selector: 'mydir'})
export class MyDir {
  @Input('mydir') id;
  constructor(public vc: ViewContainerRef) {

  }
}

然后应用到 div:

<div [mydir]="child1">
<div [mydir]="child2">

然后从父组件中查询：

@ViewChildren(MyDir) children;

ngAfterViewInit() {
   const specificID = 'child1';
   const instance = children.find((c)=>{c.id === specificID});
   const vc = instance.vc;
}

Answer 2

如果你有 angular 4 你可以使用 *ngComponentOutlet="dinamicCompomponent" 动态插入组件

Angular 4 访问没有模板局部变量的模板元素

Angular 4 access template element without template local variable

angular-template

angular-components

angular