ViewChild ion-toolbar 不起作用

在使用 Angular 时，我们经常需要使用 ViewChild 来访问子组件以获取子组件的属性和方法。但是有些开发者在使用 ViewChild 访问 ion-toolbar 时却发现无法获取 ion-toolbar 的实例，接下来我们来看看问题出在何处。

问题描述

在使用 ViewChild 时，开发者通常会将它放在 ngOnInit 函数中，例如下面这样：

import { Component, ViewChild } from '@angular/core';
import { IonToolbar } from '@ionic/angular';

@Component({
  selector: 'app-example',
  template: `
    <ion-header>
      <ion-toolbar #toolbar>
        <ion-title>
          Example
        </ion-title>
      </ion-toolbar>
    </ion-header>
  `
})
export class ExampleComponent {
  
  @ViewChild('toolbar', { static: false }) toolbar: IonToolbar;

  ngOnInit() {
    console.log(this.toolbar); // undefined
  }

}

然而在这个例子中，当我们访问 this.toolbar 的时候却发现为 undefined。

原因分析

这是因为 ion-toolbar 是延迟加载的组件，而在组件初始化 ngOnInit 函数时并不保证其已被加载，因此 ViewChild 无法访问到 ion-toolbar 的实例。

解决方法

解决这个问题有两种方法：

1. 使用 ionViewDidEnter 函数

我们可以使用 ionViewDidEnter 函数来代替 ngOnInit 函数，该函数会在视图进入页面时触发，此时 ion-toolbar 已经被加载了，我们可以在这个函数中访问到 ion-toolbar 的实例。

import { Component, ViewChild } from '@angular/core';
import { IonToolbar } from '@ionic/angular';

@Component({
  selector: 'app-example',
  template: `
    <ion-header>
      <ion-toolbar #toolbar>
        <ion-title>
          Example
        </ion-title>
      </ion-toolbar>
    </ion-header>
  `
})
export class ExampleComponent {
  
  @ViewChild('toolbar', { static: false }) toolbar: IonToolbar;

   ionViewDidEnter() {
    console.log(this.toolbar); // <ion-toolbar>
  }

}

2. 使用 ionViewWillEnter 函数

如果我们希望在 ngOnInit 函数中访问 ion-toolbar 的实例，我们可以将 static 设置为 true，以表示在组件初始化时就应该加载 ion-toolbar。

import { Component, ViewChild } from '@angular/core';
import { IonToolbar } from '@ionic/angular';

@Component({
  selector: 'app-example',
  template: `
    <ion-header>
      <ion-toolbar #toolbar>
        <ion-title>
          Example
        </ion-title>
      </ion-toolbar>
    </ion-header>
  `
})
export class ExampleComponent {
  
  @ViewChild('toolbar', { static: true }) toolbar: IonToolbar;

   ngOnInit() {
    console.log(this.toolbar); // <ion-toolbar>
  }

}

以上两种方法都能够解决 ViewChild ion-toolbar 不起作用的问题。