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

Question

我有一个父组件(比如说 ParentComponent )，我需要向它动态地 添加许多子组件(比如 ChildComponent1 、 ChildComponent2 …… ChildComponentN )。每个组件都不同。

我按照这个来解决我的问题:Angular 2 RC5-6 - Dynamically insert a component

但是为了访问将保存我的 <div> 的模板元素(一个简单的 ChildComponent )通过 @ViewChild ，我需要在此 <div> 上设置一个模板局部变量元素。

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

有什么方法可以访问我的 <div> element 通过 typescript 中的组件实现没有模板局部变量 ?

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;
}