移动到子组件时，searchBar 的 ViewChild 引用突然未定义

Question

Good afternoon! I implemented a searchbar like described in https://www.chriswoolum.dev/using-ion-searchbar-to-filter-an-observable-collection for my Angular + Ionic app.

After moving it to a own component, suddenly the searchBar is undefined, even in the ngAfterViewInit() where it should have been initialized already.

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>

Does anyone have an idea or can explain to me how the lifecycle is for component as somehow it is handled differently than directly using it in a page.

Kind regards

Answer 1

If you use @ViewChild() with {static : true} it basically means you expect that component to be present as soon as the page loads, therefore the @Viewchild() query will not update on every digest cycle.

In simple terms, this means that if your component is displayed based on an ngIf, {static : true} will not pick it up .

For the sake of the argument i'm gonna assume your

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

Is wrapped by an *ngIf at a higher level

Try to change your code with

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

you should then see your component

If that also does not work try to reference your component directly like so:

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