공유 구성 요소에서 다시로드 할 응용 프로그램 구성 요소

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에서만 호출됩니다.

생성자에서 코드를 다른 메서드로 옮기고이 메서드를 생성자에서 호출하고 목적에 맞는 다른 방법으로 호출 할 수 있습니다. 예를 들어 공유 서비스의 관찰 가능 항목 구독