Angular 4/2视图与控制器变量延迟问题的最优解决方案

嘿，这个问题我之前开发Angular项目时也碰到过！本质原因是RxJS的subscribe是异步执行的，而Angular的视图渲染是同步的——当模板开始渲染时，currentUser还没被赋值，这时候访问currentUser.type就会抛出Cannot read property 'type' of undefined的错误。下面给你几个比setTimeout优雅得多的最优解决方案，按推荐程度排序：

1. 使用安全导航操作符（?.）——最快最简的方案 #

直接在模板中用Angular提供的安全导航操作符（也叫可选链操作符），它会自动处理currentUser为undefined或null的情况，避免报错。

修改你的HTML代码：

<a *ngIf="currentUser?.type == 0" class="tooltip-icon menu-navbar-item" (click)="goListProperty()">

当currentUser还未初始化时，currentUser?.type会直接返回undefined，*ngIf判断结果为false，不会渲染这个元素；等subscribe完成赋值后，Angular的变更检测会自动重新计算表达式，渲染对应的元素。

2. 初始化currentUser为空对象 #

在组件类中给currentUser一个初始的空对象，这样即使还没拿到异步数据，访问currentUser.type只会得到undefined，不会触发报错：

修改组件代码：

export class HeaderComponent implements OnInit {
  // ...其他属性
  currentUser: any = {}; // 初始化空对象
  loading: boolean;

  // ...构造函数和ngOnInit逻辑不变
}

这种方式不需要修改模板，适合不想改动HTML的场景，不过安全导航操作符更直观。

3. 使用AsyncPipe（最佳实践，推荐） #

如果你的currentUser是通过Observable获取的，推荐用Angular的AsyncPipe来处理异步数据流。它会自动帮你管理订阅和取消订阅，还能避免内存泄漏，完全符合Angular的响应式编程理念。

组件代码修改： #

import {Component, OnInit} from '@angular/core';
import {AuthenticationService} from "../../services/authentication.service";
import {LoginService} from "../../services/login-service.service";
import {Observable, startWith} from 'rxjs';
import {Router} from '@angular/router';

@Component({
 selector: 'header-component',
 templateUrl: './header.component.html',
})
export class HeaderComponent implements OnInit {
 // 把currentUser改成Observable类型
 currentUser$: Observable<any>;
 menu: boolean;
 index: number;
 menuButton: number;
 user: any;
 isOpen = false;
 loading: boolean;

 constructor(private authentication: AuthenticationService, private signUpService: SignUpService, private loginService: LoginService, private router: Router) {
 this.user = AuthenticationService.check();
 }

 ngOnInit() {
 if (this.user) {
   // 从localStorage获取初始值
   const initialUser = JSON.parse(localStorage.getItem('currentUser'));
   // 合并初始值和authentication的通知流
   this.currentUser$ = this.authentication.notifyObservable$.pipe(
     startWith(initialUser)
   );
 }
 this.loginService.notifyUserLoginObservable$.subscribe((res) => {
   console.log(res);
   this.user = res;
 });
 this.index = 1;
 }
}

模板代码修改： #

<a *ngIf="(currentUser$ | async)?.type == 0" class="tooltip-icon menu-navbar-item" (click)="goListProperty()">

AsyncPipe会自动订阅currentUser$这个Observable，每当有新值发射时，就会自动更新视图；当组件销毁时，它也会自动取消订阅，非常省心。

4. 双重判断currentUser是否存在 #

在*ngIf中先判断currentUser是否存在，再访问它的type属性：

<a *ngIf="currentUser && currentUser.type == 0" class="tooltip-icon menu-navbar-item" (click)="goListProperty()">

这个方案和安全导航操作符效果类似，但代码稍显冗长，安全导航操作符更简洁。

为什么不推荐setTimeout？ #

setTimeout本质是“猜”异步操作的完成时间，完全不可靠——如果网络慢或者异步操作耗时较长，setTimeout的时间设置短了还是会报错；设置长了会导致视图更新延迟，影响用户体验。而上面的方案都是利用Angular本身的变更检测和异步处理机制，是更规范、更可靠的做法。

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