Question

我有一个父组件（比如ParentComponent），我需要添加许多子组件（比如ChildComponent1，ChildComponent2，... ChildComponentN）动态即可。每个组成部分都不同。

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

但是为了访问将<div>通过ChildComponent的模板元素（一个简单的@ViewChild），我需要在{{1}上设置一个模板局部变量元素。

但是，在我的情况下，我无法做到这一点，因为我无法使用动态名称设置模板局部变量。因此，我的<div>元素仅以动态添加的唯一ID属性为特征（如<div>）。

有没有办法通过typescript 中没有模板局部变量的组件实现来访问我的<div id="child1">元素？

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

如果你有角度4，你可以使用* ngComponentOutlet =＆＃34; dinamicCompomponent＆＃34;插入组件dinamically

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

2 个答案: