能否声明多个@ViewChild？Ionic模板元素获取后为undefined如何解决？

1. 能不能声明多个@ViewChild？当然可以！ #

完全没问题，同一个组件里你想声明多少个@ViewChild都可以，这是Angular里获取模板元素/组件的常规操作。

怎么操作呢？很简单：

• 给模板里的元素加上模板引用变量（就是你用#menu、#pageView这种方式定义的）
• 在组件类里，每个@ViewChild对应一个模板变量，指定好类型（比如ElementRef用于普通DOM元素，要是Ionic组件的话也可以直接用组件类，比如IonNav）

举个例子：

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

@Component({
  selector: 'app-your-page',
  templateUrl: './your-page.page.html'
})
export class YourPage {
  // 绑定模板里的#menu元素
  @ViewChild('menu') menu!: ElementRef;
  // 绑定模板里的#pageView元素
  @ViewChild('pageView') pageView!: ElementRef;

  // ... 其他业务代码
}

2. 为啥你的@ViewChild输出undefined？ #

踩过这个坑的人都懂，大概率是你访问的时机太早了！

Angular的生命周期里，@ViewChild的绑定是在视图初始化完成后才生效的——也就是ngAfterViewInit钩子执行之后。如果你在ngOnInit里就急着打印，那时候视图还没渲染好，自然拿不到元素，输出undefined很正常。

解决办法：把访问逻辑移到ngAfterViewInit里 #

修改你的组件代码，实现AfterViewInit接口，在对应的钩子函数里访问这些元素：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-page',
  templateUrl: './your-page.page.html'
})
export class YourPage implements AfterViewInit {
  @ViewChild('menu') menu!: ElementRef;
  @ViewChild('pageView') pageView!: ElementRef;

  ngAfterViewInit() {
    // 这里绝对安全，可以放心访问了
    console.log(this.menu.nativeElement, this.pageView.nativeElement);
  }

  swipeEvent(event: any) {
    // 只要ngAfterViewInit已经执行过，在事件里直接访问也没问题
    console.log(this.menu.nativeElement);
  }
}

额外排查点（如果上面的方法没用的话）： #

• 检查模板里的变量名和@ViewChild里的参数是不是完全一致（大小写、拼写都不能错！比如#menu不能写成#Menu）
• 如果你的元素是用*ngIf、*ngFor动态生成的，那可能需要给@ViewChild加{ static: true }选项，或者改用@ViewChildren——不过看你的模板代码，没有这类动态指令，所以这个情况可以忽略
• 别忘了导入AfterViewInit接口，不然Angular会报错哦

小提醒：访问DOM的正确姿势 #

通过ElementRef拿到nativeElement后，尽量不要直接手动修改DOM，尽量用Angular的数据绑定来更新视图，避免破坏Angular的变更检测机制。如果是操作Ionic组件（比如你的ion-nav），直接声明成组件类型会更方便，比如：

import { IonNav } from '@ionic/angular';
// ...
@ViewChild('pageView') pageView!: IonNav;

这样你就能直接调用ion-nav的方法，比如this.pageView.push(...)，比操作原生DOM要靠谱得多。

内容的提问来源于stack exchange，提问作者Jorge Mejia