Angular2 multicast from service

Question

У меня есть служба, которая обновляет мою базу данных. Я хочу, чтобы она обновляла как мои дедушки, так и родительские компоненты.

Поведение, которое я получаю, состоит в том, что компонент Grandparent получает ответ от службы. Если я прокомментирую код подписки в Grandparent, то я вижу поведение родителя. То, что я хочу, это оба компонента, чтобы реагировать каждый раз, когда я изменить значение кода службы в ProgressBar $

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); 
     }); 


    } 

Grandparent Компонент

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

Спасибо вам за все. Оказывается, проблема связана с тегом маршрутизатора-выхода.

Кажется, что в Angular2 есть ошибка, когда вы используете ngIf в сочетании с тегом маршрутизатора. Как только я изменил параметр «Бабушка и дедушка» на [скрытый], обе подписки загорелись, как ожидалось.

Новый Grandparent код код шаблона

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

как прежде служба изменяет значение isProgressBar, а также уведомляет родителей.

Благодарим за помощь.