Angular2、複数のコンポーネントで変数を自動更新する

Question

私のサービスに変数「choosenModels」があります。これはapp.componentとその子コンポーネントgallery.componentの2つのコンポーネントで使用されています。ボタンをクリックすると、 "choosenModels"の値が変更されますが、その変更は自分のコンポーネントでのみ表示されます。それを他のコンポーネントに見えるようにするには？

Models.service.ts：

@Injectable() 
export class ModelsService { 

    private _choosenModels: string = 'female'; 
    _choosenModelsUpdate = new EventEmitter<string>(); 

    getChoosenModels() { 
     return this._choosenModels; 
    } 
    setChoosenModels(value: string) { 
     this._choosenModels = value; 
     this._choosenModelsUpdate.emit(this._choosenModels); 
    } 
} 

2つのコンポーネント、関係、親子でここでは、コードです。

<nav class="footer__nav"> 
    <button 
     class="button" 
     (click)="onChangeModelsTeamClick('female')" 
    > 
     <div class="button__description">Modelki</div> 
     <i class="button__sign button__sign--female"></i> 
    </button> 
    <button 
     class="button button--male" 
     (click)="onChangeModelsTeamClick('male')" 
    > 
     <i class="button__sign button__sign--male"></i> 
     <div class="button__description button__description--male">Modele</div> 
    </button> 
</nav> 

子コンポーネント：gallery.component.ts：親が

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'], 
    providers: [ ModelsService ], 
}) 
export class AppComponent { 

    choosenModels: string = 'test'; 

    constructor(private _modelsService: ModelsService) {} 

    ngOnInit() { 

     this.choosenModels = this._modelsService.getChoosenModels(); 
     this._modelsService._choosenModelsUpdate.subscribe(
      (choosenModels) => { 
       this.choosenModels = this._modelsService.getChoosenModels(); 
      } 
     );   
    } 


    onChangeModelsTeamClick(value: string) { 
     console.log(value); 
     this._modelsService.setChoosenModels(value); 
    } 
} 

App.component.htmlをApp.component.ts

@Component({ 
    selector: 'app-gallery', 
    templateUrl: './gallery.component.html', 
    styleUrls: ['./gallery.component.scss'], 
    providers: [ 
     ModelsService, 
    ], 
}) 
export class GalleryComponent implements OnInit { 

    choosenModels: string;  


    constructor(private _modelsService: ModelsService) {} 
    ngOnInit() { 

     this.choosenModels = this._modelsService.getChoosenModels(); 
     this._modelsService._choosenModelsUpdate.subscribe(
      (choosenModels) => { 
       this.choosenModels = this._modelsService.getChoosenModels(); 
      } 
     );   
    } 

    onChangeModelsTeamClick(value: string) { 
     this._modelsService.setChoosenModels(value); 
    } 

} 

gallery.component.html：

<nav class="navigation"> 
    <button 
     class="button" 
     (click)="onChangeModelsTeamClick('female')" 
     [ngClass]="{'active': choosenModels=='female'}" 
    > 
     MODELKI 
    </button><!-- 
--><button 
     class="button" 
     (click)="onChangeModelsTeamClick('male')" 
     [ngClass]="{'active': choosenModels=='male'}" 
    > 
     MODELE 
    </button><!-- 
--><button 
     class="button" 
     (click)="onChangeModelsTeamClick('premium')" 
     [ngClass]="{'active': choosenModels=='premium'}" 
    > 
     PREMIUM 
    </button> 
</nav> 

Answer 1

providers: [ 
    ModelsService, 
] 

これは、そのコンポーネントインスタンス（およびそれらの子コンポーネントを再帰的に）ごとに専用のModelsServiceインスタンスを作成するようにAngularに指示します。両方のコンポーネントにはそれぞれのコンポーネントがあるため、それぞれに独自のサービスインスタンスがあります。

その他の問題：

• choosenはchosen
• サービスに持つEventEmitterを使用しないでなければなりません。これは、コンポーネント出力のみに使用する必要があります。 RxJS件名を使用してください。
• とにかくイベントは必要ありません.3つの異なる場所に同じ情報を3つコピーする代わりに、サービスに直接格納されている値を返すコンポーネントのゲッターを使用するだけで済みます。