Обновление представления ионных компонентов в приложении через страницу настроек

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() - преобразовывает входтемпература к температуре в текущих единицах (C или F).

Проблема здесь в том, что, поскольку 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);
  });
}

Я думаю, что при таком подходе проблема обновления решена.