angular - @ContentChildren 和 ng-template 的问题

Question

我有一个例子，我试图在包装器指令中使用ContentChildren获取所有指令。

具体来说，我在包装器元素上设置了 LookupContainerDirective。然后，在包装器元素内，我有一些模板，模板本身有 LookupdDirective。我正在尝试获取 LookupContainerDirective 中的所有 LookupdDirective 引用。

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);
}

我也准备了stackblitz示例(检查控制台输出)。

我希望控制台输出对 LookupdDirective 的所有引用，但它显示没有 (_results: Array[0])。如果我不使用模板而是使用常规元素，则会找到引用 (_results: Array[1])。

Answer 1

有一个 ongoing discussion对这个。

一个建议的解决方法是；

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

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

解释为 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.