angular - Hur man startar om ngOnInit för att uppdatera interpolering

Finns det ett sätt att starta om ngOnInit() när en variabel ändras

Eftersom jag vill starta om ngOnInit() när theme-variabeln ändras, är detta min kod

Settings.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';
  }
}

Inställningar.html

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

Mitt problem med phraseColor-variabeln

Standardvärdet för phraseColor är Blå

när jag ändrar theme-variabeln med changeTheme() ska värdet av phraseColor vara Orange

Men nej, värdet på phraseColor förblir Blå

Men när jag går till någon sida och återvänder till den här sidan är värdet på phraseColor Orange

Min fråga är hur man startar om ngOnInit för att uppdatera interpolering

theme-variabeln från denna sida SettingsService.ts

export class SettingsService {
  theme: string = '#3f51b5';
}

Svar #1

ngOnInit är en livscykelkrok. Den körs av ramverket och är inte avsedd att anropas manuellt. Klassen bör omstruktureras för att inte kräva det.

Med tanke på att settingsService.theme inte ändras godtyckligt utan endast med changeTheme, kan värden uppdateras där:

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

Om settingsService.theme förväntas ändras någon annanstans, kräver tjänsten en RxJS observable/subject för att kunna meddela prenumeranterna:

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

Det kan prenumereras på i komponenten:

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