angular - Một vấn đề với @ContentChildren và ng-template

Tôi có một ví dụ nơi tôi đang cố gắng lấy tất cả các chỉ thị bằng cách sử dụng ContentChildren trong chỉ thị bọc.

Cụ thể, tôi đã thiết lập LookupContainerDirective trên một phần tử bao bọc. Sau đó, bên trong phần tử bao bọc, tôi có một số mẫu và bản thân mẫu đó có LookupdDirective trong đó. Tôi đang cố gắng lấy tất cả các tham chiếu LookupdDirective trong 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);
}

Tôi cũng đã chuẩn bị ví dụ stackblitz (kiểm tra đầu ra console).

Tôi mong rằng bảng điều khiển sẽ xuất tất cả các tham chiếu đến LookupdDirective nhưng thay vào đó nó hiển thị rằng không có cái nào (_results: Array[0]). Nếu tôi không sử dụng mẫu mà dùng phần tử thông thường thì các tham chiếu được tìm thấy (_results: Array[1]).

Câu trả lời #1

Có một cuộc thảo luận đang diễn ra về vấn đề này.

và một giải pháp tạm thời được đề xuất là như sau;

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

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

như đã giải thích ở đây

Trong Angular, chiếu nội dung và truy vấn có nghĩa là "nội dung như được viết trong một template" chứ không phải "nội dung như hiển thị trong DOM" như bạn có vẻ mong đợi.