带有 ng-template 的 Angular 内容子项不起作用

Question

I have the following directive:

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

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

}

And I want to use it with <ng-template> :

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

But it doesn't work. I can't get a reference to the button. The log is undefined . How can I make it work?

Answer 1

You can't retrieve elements or directives that are in other components' templates, since a component's template is always a black box to its ancestors ContentChild

What you can do is using templateRef & viewContainer

You'll acquire the contents with a TemplateRef and access the view container through a 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);
    }
  }

}