Как перезапустить ngOnInit для обновления интерполяции

Есть ли способ перезапустить ngOnInit() на переменную change

Потому что я хочу перезапустить ngOnInit() при изменении переменной theme , это мой код

Настройки.ts 

export class SettingsPage implements OnInit{
  phraseColor: string;
  ngOnInit() {
    let tch : {} = {'#3f51b5': 'Blue', '#ff9800': 'Orange'}
    let ColorName =  tch[this.settingsService.theme]; /* here my problem */
    this.phraseColor = ColorName;
  }
  changeTheme(){
    this.settingsService.theme = '#ff9800';
  }
}

Настройки.html 

<div>Theme is {{ phraseColor }}</div>
<button (click)="changeTheme()">Change language</button>

Моя проблема в phraseColor переменной

Значение по умолчанию phraseColor равно синий

Когда я изменяю переменную theme с помощью changeTheme(), предполагается, что значение phraseColor является оранжевым

Но нет значение phraseColor остаться синий

Однако, когда я перехожу на любую страницу и возвращаюсь на эту страницу, значение phraseColor равно оранжевому

Мой вопрос заключается в том, как перезапустить ngOnInit, Чтобы обновить интерполяцию

theme переменная с этой страницы SettingsService.ts 

export class SettingsService {
  theme: string = '#3f51b5';
}
1 2
typescript ionic-framework

1 ответ:

ngOnInit это жизненный цикл крючка. Он выполняется платформой и не должен вызываться вручную. Класс должен быть преобразован, чтобы не требовать этого.

Учитывая, что settingsService.theme не изменяется произвольно, а только с changeTheme, значения могут быть обновлены там: 

  ngOnInit() {
    this.updateColor();
  }

  changeTheme(){
    this.settingsService.theme = '#ff9800';
    this.updateColor();
  }

  updateColor() {
    let tch : {} = {'#3f51b5': 'Blue', '#ff9800': 'Orange'}
    let ColorName =  tch[this.settingsService.theme];
    this.phraseColor = ColorName;
  }

Если settingsService.theme предполагается изменить где-то еще, сервис требует RxJS observable / subject, чтобы уведомить подписчиков: 

export class SettingsService {
  theme: Subject = new BehaviorSubject('#3f51b5'); 
}

Он может быть подписан в компоненте: 

  themeSubscription: Subscription;

  ngOnInit() {
    this.themeSubscription = this.settingsService.theme.subscribe(theme => {
      let tch : {} = {'#3f51b5': 'Blue', '#ff9800': 'Orange'}
      //  immediate value is also available as this.settingsService.theme.value
      let ColorName =  tch[theme];
      this.phraseColor = ColorName;
    });
  }

  ngOnDestroy() {
    this.themeSubscription.unsubscribe();
  }

  changeTheme(){
    this.settingsService.theme.next('#ff9800');
  }
3