@ContentChildren和ng-template有问题

Question

I have an example where I am trying to get all directives using ContentChildren in wrapper directive .

Specifically, I have LookupContainerDirective set on a wrapper element. Then, inside the wrapper element, I am have some template and the template itself has LookupdDirective in it. I am trying to get all LookupdDirective references in LookupContainerDirective .

app.component.html

<div appLookupContainer>
  <!-- <div appLookupd></div> -->
  <ng-container *ngTemplateOutlet="myTemp"></ng-container>
</div>  


<ng-template #myTemp>
  <div appLookupd></div>
</ng-template>

lookup-container.directive.ts

@ContentChildren(LookupdDirective, { descendants: true })
private _lookupDirectives: QueryList<LookupdDirective>;

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

I also prepared stackblitz example (check console output).

I expect that the console outputs all references to the LookupdDirective but instead it shows that there is none ( _results: Array[0] ). If I don't use the template but regular element then the references are found ( _results: Array[1] ).

Answer 1

there is an ongoing discussion about this.

and one suggessted workaround is this;

<div appLookupContainer>
    <ng-container *ngTemplateOutlet="myTemp"></ng-container>

    <ng-template #myTemp>
        <div appLookupd></div>
    </ng-template>
</div>

as explained here

In Angular content projection and queries it means "content as it was written in a template" and not "content as visible in the DOM" as you seem to expect.