Angular:访问位于"async"管道元素内的模板引用变量

Question

当元素位于具有async管道的元素内部时，我想使用@ViewChild访问模板引用变量，如下所示：

<ng-container *ngIf="productTemplates$ | async as templates; else loading">
<div class="row">
<mat-checkbox #selectAll (change)="toggleAllTemplates($event)">Select All</mat-checkbox>
</div>
</ng-container>

在组件生命周期的早期(如ngAfterViewInit中(，当返回产品的API调用之前#selectAll引用不存在时，我如何安全地访问它？

Answer 1

我会将@ViewChild替换为@ViewChildren。一开始可能不那么直观，但背后的原因是@ViewChildren总是在ngAfterViewInit生命周期方法中返回一个不是null的QueryList。

然后，您可以订阅changesobservable，每次该查询列表更改时都会收到通知

@ViewChildren('selectAll', { read: MatCheckbox }) selectAllCheckboxes!: QueryList<MatCheckbox>;
ngAfterViewInit() {
this.selectAllCheckboxes.changes.pipe(
filter(() => this.selectAllCheckboxes.length > 0)
).subscribe(() => this.doSomethingWithTheCheckbox());
}
private doSomethingWithTheCheckbox() {
const selectAllCheckbox = this.selectAllCheckboxes.first;
// here you should be able to safely use your selectAllCheckbox
}