Ionic中ng-switch下ViewChild组件变量无法访问问题

我来帮你捋捋这个问题——这其实是Angular的视图初始化机制和ngSwitch的特性共同导致的~

问题根源 #

ngSwitch的工作逻辑是：只有当对应的case匹配时，才会渲染该分支下的DOM元素。当你刚切换到addPhotos标签页时，<multi-image-upload>组件还没完成初始化，此时模板里直接访问multiImageUpload.isUploading，就会因为multiImageUpload还未被赋值而抛出“未定义”的错误。

而且@ViewChild的赋值时机是在ngAfterViewInit钩子之后，切换标签页的过程是异步的，刚切换过去时这个钩子还没执行，所以multiImageUpload自然是undefined。

解决方案 #

这里给你两种简单有效的处理方式：

1. 使用安全导航操作符（?.）（最简便）

直接在模板里给属性访问加上?.，这样当multiImageUpload未初始化时，不会抛出错误，而是返回undefined，条件判断会自动不成立：

<button ion-button block (click)="newStory()" *ngIf="!multiImageUpload?.isUploading && !uploadFinished">
  <ion-icon name="checkmark"></ion-icon> Upload
</button>
<button ion-button block (click)="cancel()" color="danger" *ngIf="multiImageUpload?.isUploading && !uploadFinished">
  <ion-icon name="close"></ion-icon> Cancel
</button>

2. 把判断逻辑移到组件类中

如果不想在模板里写太多表达式，可以在组件类里封装判断方法，先检查multiImageUpload是否存在：

// 组件类中新增方法
canShowUploadButton(): boolean {
  return this.multiImageUpload && !this.multiImageUpload.isUploading && !this.uploadFinished;
}

canShowCancelButton(): boolean {
  return this.multiImageUpload && this.multiImageUpload.isUploading && !this.uploadFinished;
}

然后模板里调用这些方法：

<button ion-button block (click)="newStory()" *ngIf="canShowUploadButton()">
  <ion-icon name="checkmark"></ion-icon> Upload
</button>
<button ion-button block (click)="cancel()" color="danger" *ngIf="canShowCancelButton()">
  <ion-icon name="close"></ion-icon> Cancel
</button>

这两种方法都能解决你遇到的“未定义”报错问题，推荐第一种，代码改动最小~

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