서비스에서 앵귤러 2 멀티 캐스트

Question

데이터베이스를 업데이트하는 서비스가 있습니다. 조부모 및 부모 구성 요소를 모두 업데이트하려고합니다.

내가 얻는 동작은 조부모 구성 요소가 서비스의 응답을 받고 있다는 것입니다. 조부모의 구독 코드를 주석 처리하면 부모 동작이 표시됩니다. 내가 원하는

export class CompetitionService { 
    progressBarSubject = new Subject<boolean>(); 
    progressBar$ = this.progressBarSubject.asObservable(); 
    private subscription: Subscription=new Subscription(); 

    constructor(
    private loginService: LoginService, 
    private http: Http 
) { } 

    initializeCompetition(compDate: string) { 
    this.progressBarSubject.next(true); 


    const login = this.loginService.getLogin(); 
    const url = AppSettings.API_ENDPOINT + "competition/addCompetition"; 

    let headers = new Headers(); 
    headers.append('C247Token', login.getToken()) 

    let body = { 'C247Token': login.getToken(), 'compDate': compDate }; 

    //execute http (must have a corisponding subscribe) 
    this.subscription = this.http.post(url, body, { headers: headers }) 
     .subscribe(res => { 

     this.progressBarSubject.next(false); 
     }, 
     err => { 
     this.handleError(err); 
     }); 


    } 

조부모 구성 요소

내가 ProgressBar의 $

서비스 코드의 값을 변경할 때마다 대응하는 두 구성 요소입니다

private isProgressBarOn: boolean = false; 
    private subscription: Subscription = new Subscription(); 

    constructor(private loginService: LoginService, 
    private competitionService: CompetitionService, 
    private cd: ChangeDetectorRef, 
    private router:Router 
) { } 

    ngOnInit() {  
    this.subscription = this.competitionService.progressBar$ 
     .subscribe(
     response => { 
     this.isProgressBarOn = response; 
     this.cd.detectChanges(); 
     //alert("Stop "+'"'+this.isProgressBarOn+'"'); 

     } 
    );//*/ 
    } 

부모 요소 :

ngOnInit() { 
    this.initForm(); 
    this.subscription = this.competitionService.progressBar$ 
    .subscribe(response=>{ 
     console.log('hit '+response); 
    } 

Answer 1

모두에게 감사드립니다. 그 문제는 router-outlet 태그와 관련이있는 것으로 나타났습니다.

ngIf를 라우터 태그와 함께 사용하면 Angular2에 버그가있는 것 같습니다. 조부모 ngIf를 [hidden]으로 변경하면 두 구독이 모두 예상대로 실행됩니다.

새로운 조부모 코드 템플릿 코드는 서비스가 isProgressBar의 값을 변경하기 전에 같은

<!-- old code <div *ngIf-"isProgressBarOn"> --> 
<div [hidden]="isProgressBarOn"> 
    <router-outlet></router-outlet> 
</div> 

이며, 또한 부모를 알려줍니다.

당신의 도움에 감사드립니다.