Angular дочерний контент с ng-template не работает

Question

У меня есть следующая директива:

@Directive({
  selector: '[appTest]'
})
export class TestDirective {
  @ContentChild(ButtonComponent, { static: false }) button;
  constructor() { }

  ngAfterContentInit() {
    console.log(this.button);
  }

}

И я хочу использовать ее с <ng-template>:

<ng-template appTest>
  <app-button></app-button>
</ng-template>

Но это не работает. Не могу получить ссылку на кнопку. Журнал undefined. Как заставить его работать?

Answer 1

Вы не можете получить элементы или директивы, которые находятся в шаблонах других компонентов, поскольку шаблон компонента всегда является черным ящиком для своих предков ContentChild

Что вы можете сделать, так это использовать templateRef & viewContainer

. Вы получите содержимое с помощью TemplateRef и получите доступ к контейнеру представления через ViewContainerRef.

@Directive({
  selector: '[appTest]'
})
export class TestDirective {

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) {

    var embeddedViewRef = viewContainer.createEmbeddedView(this.templateRef);

    for (var node of embeddedViewRef.rootNodes) {

      //Your button component
      console.log(node);
    }
  }

}