Question

我有一个示例，我尝试使用包装器指令中的ContentChildren获取所有指令。

具体来说，我在包装器元素上设置了LookupContainerDirective。然后，在wrapper元素内部，我有一些模板，并且模板本身中包含LookupdDirective。我正在尝试获取LookupdDirective中的所有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);
}

我还准备了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

所述

在Angular内容投影和查询中，它表示“原样的内容写在模板中”而不是像您在“ DOM中可见的内容” 似乎期望。

@ContentChildren和ng-template有问题

1 个答案: