Элемент шаблона доступа Angular 4 без локальной переменной шаблона

У меня есть родительский компонент (скажем, ParentComponent) и мне нужно добавить много дочерних компонентов (скажем, ChildComponent1, ChildComponent2... ChildComponentN) к нему динамически. Каждый компонент отличается.

Я следовал этому, чтобы решить мою проблему: Angular 2 RC5-6 - Динамически вставить компонент

Но для того, чтобы получить доступ к элементу шаблона (простой <div>) что подержит ChildComponentчерез @ViewChildМне нужно установить локальную переменную шаблона на этом <div> элемент.

Однако в моем случае я не могу этого сделать, потому что не могу установить локальную переменную шаблона с динамическим именем. Так что мой <div> элемент характеризуется только уникальным атрибутом id, который добавляется динамически (например, <div id="child1">).

Есть ли способ получить доступ к моему <div> элемент через реализацию компонента в машинописи без шаблона локальной переменной?

Источник

2 ответа

Решение

Я думаю, что вы можете создать директиву 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;
}
Источник

Если у вас угловой 4, вы можете использовать *ngComponentOutlet="dinamicCompomponent" для динамической вставки компонента

Источник
Другие вопросы по тегам