Angular 2의 서비스를 통한 업데이트가 없음

Question

다른 구성 요소 (부모) 안에 구성 요소 (하위 구성 요소)가 있습니다. 자식을 호출하는 태그는 router-outlet입니다. 이 상황에서 나는 EventEmitter과 Output을 사용할 수 없기 때문에 부모 변수를 변경할 수있는 서비스를 작성했지만 작동하지 않습니다.

서비스 :

import {Subject} from 'rxjs/Subject'; 

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

@Injectable() 
export class TabStatusService { 


    private sub=new Subject<boolean>(); 
    dataStatus$ = this.sub.asObservable(); 

    changeStatus(data:boolean){ 

    this.sub.next(data); 
    } 
} 

부모 :

@Component({ 
    ... 
    providers:[TabStatusService] 
}) 


export class SecondarytabsComponent implements OnInit { 


private status:boolean=false; 
    constructor(private tabStatusService: TabStatusService) { 


    ngOnInit() { 


    this.tabStatusService.dataStatus$.subscribe(
     data => { 
     this.status = data; 

     }); 
    } 
} 

템플릿 :

<div> 



    <p>{{status}} </p> 


</div> 
<router-outlet></router-outlet> 

아이 :

@Component({ 
    .... 
    providers:[ConfirmationService, TabStatusService] 
}) 
export class ProceduresComponent implements OnInit { 

    constructor(private confirmationService: ConfirmationService, private tabStatusService:TabStatusService) { 


    } 

    ngOnInit() { 
    } 

    setStatus(value){ 
    this.tabStatusService.changeStatus(value); 
    } 

} 

템플릿 :

<div> 

<button type="button" class="btn btn-primary btn-lg btn-block login-button"(click)="setStatus(true)">Back</button> 

</div> 

어디에서 문제가 발생합니까?

는

Answer 1

자녀 구성 요소의 providers 메타 속성 필드에서 [TabStatusService]을 제거 감사드립니다.

현재 동일한 서비스의 여러 인스턴스를 만듭니다. 동일한 서비스 인스턴스를 공유하려면 루트 구성 요소 또는 @NgModule을 제공해야합니다.

이렇게하면 예상대로 작동합니다.