Angular2, 여러 구성 요소의 변수 자동 업데이트

Question

내 서비스에서 "choosenModels"변수가 있는데,이 구성 요소는 app.component와 그의 하위 구성 요소 인 gallery.component의 두 가지 구성 요소에 사용됩니다. 버튼을 클릭하면 "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); 
    } 
} 

두 구성 요소, 관계 부모 - 자식에 여기에 코드입니다.

<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, 
] 

이 명령은 Angular가 해당 구성 요소 인스턴스 (및 해당 자식 구성 요소를 재귀 적으로)마다 전용으로 ModelsService 인스턴스를 생성하도록 지시합니다. 두 구성 요소에는 모두 해당 구성 요소가 있기 때문에 각 구성 요소마다 고유 한 서비스 인스턴스가 있습니다.

다른 문제 :

• choosen이 chosen
• 이 서비스에 EventEmitter를 사용하지 않는해야합니다. 이것은 구성 요소 출력에만 사용되어야합니다. RxJS 제목을 사용하십시오.
• 어쨌든 이벤트가 필요하지 않습니다. 서비스에 저장된 값을 반환하는 구성 요소에서 getter를 사용하면 3 개의 다른 위치에 동일한 정보가 3 개가 아닌 getter를 간단하게 사용할 수 있습니다.