angular - 如何从 cdkPortal 中的内容获取 ViewChild

Question

我有几个带有“工具”的组件，在创建时将这些工具插入应用程序中预定义的“命名”位置，例如左/右/侧工具栏。他们使用 Angular CDK Portals 来做到这一点。它看起来像这样:

// component template here...

// then portions of UI for portals, like this:
<ng-template cdkPortal #leftToolbar>
    <app-search-input #search (search)="onSearch($event)"></app-search-input>
</ng-template>

我的目标是以某种方式获取对放置在门户内的 app-search-input 组件的引用。

下面显示的不起作用，this.searchEl 始终是 undefined:

// component class
@ViewChild('search', {static: true}) searchEl: SearchInputComponent;

有什么想法吗，伙计们？

Answer 1

在呈现之前，您无法访问 ng-template 中的任何内容。

但是当您的 ViewChild 通过 setter 初始化时，您始终可以订阅该事件:

@ViewChild('search') set searchEl(value: any) {
  if (value) {
    // do smth
  }
};

Stackblitz Example