我有一个父组件(比如说 ParentComponent )，我需要向它动态地 添加许多子组件(比如 ChildComponent1 、 ChildComponent2 …… ChildComponentN )。每个组件都不同。
我按照这个来解决我的问题:Angular 2 RC5-6 - Dynamically insert a component
但是为了访问将保存我的 <div> 的模板元素(一个简单的 ChildComponent )通过 @ViewChild ，我需要在此 <div> 上设置一个模板局部变量元素。
但是，在我的例子中，我不能那样做，因为我不能用动态名称 设置模板局部变量。所以我的 <div>元素仅以动态添加的唯一 id 属性为特征(如 <div id="child1"> )。
有什么方法可以访问我的 <div> element 通过 typescript 中的组件实现没有模板局部变量 ?
最佳答案
我想你可以创建一个指令 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;
}
关于没有模板局部变量的Angular 4访问模板元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44847488/