通过设置页面跨应用程序更新离子组件视图答案

【问题标题】：Update ionic component view across app through settings page通过设置页面跨应用程序更新离子组件视图
【发布时间】：2019-10-31 20:16:22
【问题描述】：

我正在开发一个应用程序，该应用程序具有与环境温度相关的离子成分。这个细节是从我创建的 TemperatureService 中获取的。

现在，在设置选项卡中，我需要能够在摄氏度和华氏度之间进行切换，并且无论在何处使用该组件，此更改都应反映在整个应用程序中。

页面的 HTML 文件包含这样的组件：

<ion-col> 
        <app-temperature-meter></app-temperature-meter>
</ion-col>

并且以这种方式从服务中获取温度：

ngOnInit() {
    this.loadedEnvironment = this.currentPlace.getEnvironment();
    this.temperatureToShow = this.tempCtrl.toCurrentUnit(this.loadedEnvironment.currTemp);
  }

其中tempCtrl 是服务，toCurrentUnit() 将输入温度转换为当前单位（摄氏度或华氏度）的温度。

这里的问题是，由于temperatureToShow 是在ngOnInit 期间确定的，所以当我在设置页面中更改设置时，它不会动态更改。

已测试：由于该组件在多个页面上使用，因此我检查了服务和ngOnInit 功能的正确运行。它们似乎可以工作（即，如果第一次加载页面并调用 ngOnInit，则显示的温度为当前所需的单位）

期望：组件是否有类似于ionViewWillEnter 的内容，这样每当它们出现在屏幕上时，我就可以从服务中检查当前温度单位并相应地更改视图。

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

我认为您可以通过使用事件发射器发布消息来实现目标。如果您更改设置页面中的设置，请在事件中发布消息。组件将订阅消息并设置新值。

这里是一个事件发射器的例子：

import { Events } from 'ionic-angular';

// first page (publish an event when a user is created)
constructor(public events: Events) {}
createUser(user) {
  console.log('User created!')
  this.events.publish('user:created', user, Date.now());
}


// second page (listen for the user created event after. 
function is called)
    constructor(public events: Events) {
  events.subscribe('user:created', (user, time) => {
    // user and time are the same arguments passed in. 
`events.publish(user, time)`
    console.log('Welcome', user, 'at', time);
  });
}

我认为通过这种方法可以解决更新问题。

【讨论】：