Ionic 3按钮点击后无法即时更新颜色与文本问题求助

我之前也碰到过一模一样的问题！这本质上是Angular的变更检测没有即时触发，导致UI没跟着变量变化更新。下面给你几个亲测有效的解决方案：

方案1：手动触发变更检测 #

Angular默认会在大多数异步操作后自动跑变更检测，但在Ionic的某些场景下，可能需要我们手动推一把。用ChangeDetectorRef就能搞定：

首先在你的home.ts里导入并注入这个服务：

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  ColorButton: string = "primary";
  TextButton: string = "It's blue !";

  constructor(private cdRef: ChangeDetectorRef) {}

  Clicked(){
    this.ColorButton = "danger";
    this.TextButton = "It's now red !";
    // 手动触发变更检测，让Angular更新UI
    this.cdRef.detectChanges();
  }
}

方案2：检查组件的变更检测策略 #

你可以看看home.ts的组件元数据里有没有设置changeDetection: ChangeDetectionStrategy.OnPush。如果用了OnPush策略，Angular只会在输入属性变化或者组件内部有Angular能跟踪的异步事件时才更新UI。要是你确实用了OnPush，那要么像方案1那样手动触发检测，要么确保变量的修改是在Angular的上下文里。

方案3：用NgZone强制在Angular上下文内执行 #

有时候某些操作可能跑出了Angular的Zone范围，导致变更检测没察觉到。这时候把赋值操作包在NgZone.run()里就行：

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  ColorButton: string = "primary";
  TextButton: string = "It's blue !";

  constructor(private ngZone: NgZone) {}

  Clicked(){
    this.ngZone.run(() => {
      this.ColorButton = "danger";
      this.TextButton = "It's now red !";
    });
  }
}

补充说明 #

Ionic基于Angular构建，Angular靠Zone.js来跟踪异步操作并自动触发变更检测。但极少数情况下，比如某些自定义事件或者第三方库的操作，可能会脱离Zone的跟踪，这时候就需要我们手动干预，确保Angular能感知到变量的变化，从而即时更新UI。

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