Блог

У меня есть пользовательская директива, которая динамически загружает компонент на основе некоторого ввода, пока эта часть работает:

 <ng-container customDirective [variant]="something"></ng-container>
 

Используя ComponentFactoryResolver и ViewContainerRef , я могу затем создать соответствующий компонент на основе значения variant . Пока это работает.

Но теперь я хочу, чтобы динамические компоненты включали дочерние элементы, например:

 <ng-container customDirective [variant]="something">
  <span>I want to be inside the dynamic component!</span>
  <span>me too!</span>
</ng-container>
 

Простое использование <ng-content></ng-content> внутри шаблона динамического компонента не приводит к отображению дочерних элементов.

Кажется, мне нужно передать дочерние createComponent элементы, что-то вроде этого:

 const headerInstanceRef = this.viewContainerRef.createComponent<Component>(
  componentFactory,
  0,
  undefined,
  [
    // pass children here, somehow    
  ]
);
 

Но я не могу понять, как их извлечь. Я пытался использовать ContentChildren и ViewChildren в директиве, но оба подходят undefined .

Шаблон, в котором будет использоваться директива, может содержать несколько экземпляров этой директивы, каждый со своим отдельным набором дочерних элементов, так что это тоже вызывает беспокойство.