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

Question

我正在开发一个应用程序，它有一个与周围环境温度相关的离子组件。此详细信息是从我创建的 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 的东西，这样只要它们出现在屏幕上，我就可以从服务中检查当前温度单位并相应地更改视图。

Answer 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);
  });
}

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

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

Update ionic component view across app through settings page

ionic-framework

angular

ionic4