移動到子組件時，searchBar 的 ViewChild 引用突然未定義

Question

下午好！ 我為我的 Angular + Ionic 應用程序實現了一個類似於https://www.chriswoolum.dev/using-ion-searchbar-to-filter-an-observable-collection 中描述的搜索欄。

將其移動到自己的組件后，突然之間 searchBar 未定義，即使在它應該已經初始化的 ngAfterViewInit() 中也是如此。

my-list.component.ts

  @ViewChild(IonSearchbar, {static: true}) searchBar: IonSearchbar;
  @ViewChild(IonSelect, {static: true}) selectBodypart: IonSelect;


  ngAfterViewInit() {
    console.log(this.searchBar) # undefined
  }

my-list.component.html

  <ion-searchbar #searchBar placeholder="Search.."></ion-searchbar>

有沒有人有想法或可以向我解釋組件的生命周期如何，因為它的處理方式與直接在頁面中使用不同。

親切的問候

Answer 1

如果您將@ViewChild()與{static : true}則基本上意味着您希望該組件在頁面加載后立即出現，因此@Viewchild()查詢不會在每個摘要周期更新。

簡單來說，這意味着如果您的組件是基於 ngIf 顯示的，則{static : true}將不會選擇它。

為了爭論，我假設你

<ion-searchbar #searchBar placeholder="Search.."></ion-searchbar>

被更高級別的 *ngIf 包裹

嘗試更改您的代碼

@ViewChild(IonSearchbar, {static: false}) searchBar: IonSearchbar;
@ViewChild(IonSelect, {static: false}) selectBodypart: IonSelect;

然后你應該看到你的組件

如果這也不起作用，請嘗試直接引用您的組件，如下所示：

@ViewChild("searchBar", {static: false}) searchBar: IonSearchbar;