Обновить компонент приложения при изменении общего компонента

Question

У меня есть главное меню в моем приложении app.component.ts, и я добавил компонент, разделяющий язык, который отлично работает во всех компонентах, которые используют мой общий модуль. Но теперь я хочу локализовать свое главное меню. Поскольку app.component не включает общий модуль, когда я меняю язык в своем языковом селекторе, он не отображается в меню. Я думал, что я могу поместить выбранный язык в локальное хранилище, а в конструкторе компонента приложения я мог бы присваивать переводы различным переменным и использовать их в интерфейсе. Но я не знаю, как вызвать конструктор компонента приложения в моем общем компоненте, или если я должен использовать этот подход.

Вот соответствующие части моего приложения компонента:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'main-app', 
    template: ` 
    <div> 
     <div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarHeaderCollapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 
       <div class="navbar-collapse collapse" id="navbarHeaderCollapse"> 
        <ul class="nav navbar-nav"> 
         <li><a [routerLink]="['/Home']" data-toggle="collapse" data-target=".navbar-collapse">{{home}}</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <div class="container body-content" style="margin-top:80px;"> 
      <router-outlet></router-outlet> 
     </div> 
    </div> 
    ` 
}) 

export class AppComponent { 
    home: string; 

    constructor() { 
     var selectedLang = JSON.parse(localStorage.getItem('selectedLang')); 

     if (selectedLang === null) { 

      this.home = "Home"; 
     } 
     else { 
      if (selectedLang.lang === 'fi') 
      { 
       this.home = "Koti"; 
      } 
      else { 
       this.home = "Home"; 
      } 
     } 
    } 
} 

А вот соответствующие части моего общего компонента:

import { Component } from '@angular/core'; 
import { TranslateService } from 'ng2-translate'; 

@Component({ 
    selector: 'language-selector', 
    templateUrl: '../app/shared/components/language-selector.component.html' 
}) 

export class LanguageSelectorComponent { 

    languageSelectorClicked(lang: string): void { 
     localStorage.setItem('selectedLang', JSON.stringify({ lang: lang })); 
     this.translate.currentLang = lang; 
     this.translate.use(lang); 
    } 

    constructor(public translate: TranslateService) { 
    } 
} 

Может кто-нибудь помочь с этим, или предложить лучший подход ?

Answer 1

Вы не можете запускать конструктор компонентов вообще, и особенно не тот из AppComponent. Они вызываются только Angulars DI, когда создается новый экземпляр.

Вы можете переместить код из конструктора в другой метод и вызвать этот метод в конструкторе и другими способами, которые, по вашему мнению, подходят для этой цели. Например, подписка на наблюдаемую общую услугу.