Ionic開發過程中遇到一個奇怪的問題,當通過Android原生Java以廣播方式將數據傳遞到.ts頁面時,數據可以console.log()出來,但UI并沒有更新。
我的Android代碼:
Intent intent = new Intent("TAG");
bundle.putString("userdata", "{ name: '" + "小明" + "', age: '" + "18" + "'}");
intent.putExtras(bundle);
LocalBroadcastManager.getInstance(context).sendBroadcastSync(intent);
在home.ts頁面中,我訂閱了觸發事件,我的初始代碼是:
ionViewWillEnter() {
this.broadcaster.addEventListener('TAG').subscribe((event) => {
this.items.push({
name: event['name'],
age: event['age'],
});
});
}
我期望在這里發生的是我的items數組(使用* ngFor以標準方式在我的模板中表示)將使用來自廣播對象的值進行刷新。不幸的是,console.log()可以看到數據更新,但屏幕上仍然沒有顯示任何內容。通過一番Google,在這里找到了解決方案,需要一個變化檢測,下面是一些小的更改。
feat
1、導入NgZone模塊:
import { NgZone} from '@angular/core';
2、創建一個NgZone:
this.zone = new NgZone({enableLongStackTrace: false});
3、將代碼封裝在this.zone.run()中:
ionViewWillEnter() {
this.broadcaster.addEventListener('TAG').subscribe((event) => {
this.zone.run(() => {
this.items.push({
name: event['name'],
age: event['age'],
});
});
});
}
至此,模型更改就會成功檢測并更新UI,詳情需要閱讀Angular Zones和ChangeDetectorRef,希望這可以幫助有類似問題的猿友哈哈。