共有コンポーネントのリロードアプリケーションコンポーネントの変更

Question

私のapp.component.tsにメインメニューがあり、共有モジュールを使用するすべてのコンポーネントでうまく動作する言語セレクタ共有コンポーネントが追加されました。しかし、今私はメインメニューをローカライズしたい。 app.componentには共有モジュールが含まれていないため、言語セレクタで言語を変更するとメニューに反映されません。私は選択した言語をローカルストレージに置くことができると思っていました。アプリケーションコンポーネントのコンストラクタで、さまざまな変数に翻訳を割り当てて、フロントエンドのものを使用することができました。しかし、共有コンポーネントのアプリケーションコンポーネントコンストラクタの起動方法や、そのアプローチを使用する必要があるかどうかはわかりません。ここで

は私のアプリのコンポーネントの関連する部分です：

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) { 
    } 
} 

誰もがこれを助け、またはより良いアプローチを提案することができます：

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

そして、ここでは私の共有コンポーネントの関連する部分はあります？

Answer 1

コンポーネントコンストラクタは、特にAppComponentのものではなく、トリガできません。新しいインスタンスが作成されるときにのみ、Angulars DIによって呼び出されます。

コンストラクタからコードを別のメソッドに移動して、このメソッドをコンストラクタや目的に合った方法で呼び出すことができます。例えば、共有サービスのオブザーバブルへのサブスクリプション。