受信したイベントのコンポーネントを変更する - angular2

Question

コンポーネントに通知する際に問題があり、その変更が発生しました。

私は1つのコンポーネントAを持っているとしましょう。これはイベントE（あるサービスを通して）を出します。コンポーネントBは、そのイベントにサブスクライブされます。私がconsole.logがコンポーネントBのイベントとプロパティを受け取った場合、変更されたことがわかります。

ただし、コンポーネントのテンプレートは変わりません。

私はChangeDetectorRefを使用し、changeDetectorRef.detectChanges()を使用すると、ビューが最新表示されると考えました。 次のエラーが発生し続ける：

Attempt to use a destroyed view: detectChanges

コンポーネントを使用して通知するには、この方法が望ましいですか？何か良いことがありますか？

ここで私が使用しているコードの簡単な例は次のとおりです。これは、成分Bは

であり、それは

import {Component, OnInit, ChangeDetectorRef} from '@angular/core'; 

import {LiveIndexService} from './services/live-index.service'; 
import {LiveNavigationService} from '../../services/live-navigation.service'; 

@Component({ 
    selector: 'live-index', 
    template: require('./index.html'), 
    providers: [BetradarService] 
}) 
@CanActivate(() => { 
    return areDependenciesFetched(); 
}) 
export class LiveIndexComponent implements OnInit { 

constructor(
    private _liveNavigationService: LiveNavigationService, 
    private _changeDetector: ChangeDetectorRef) {} 

public ngOnInit() { 
    this._liveNavigationService.sportSelectedEvent$.subscribe(selectedSport => { 
    this._selectedSport = selectedSport; 
    console.log(this._selectedSport); // I see it is changed, but if I omit next line, it's not working. 
    this._changeDetector.detectChanges(); 
}); 

} }

を変更する必要があり、これは成分Aされますイベントを発生させるサービスを起動する

import {Component, Output, EventEmitter, ChangeDetectorRef} from 'angular2/core'; 
import {LiveNavigationService} from '../../services/live-navigation.service'; 

@Component({ 
    selector: 'live-breadcrumbs', 
    template: require('./live-breadcrumbs.html') 
}) 
export class LiveBreadcrumbsComponent { 

    private _selectedSport; 

    public constructor(private _liveNavigationService: LiveNavigationService, 
       private _changeDetectorRef: ChangeDetectorRef) {} 

    // this function is triggered from template (onClick) 
    private _selectSport(sport) { 
    this._selectedSport = sport; 

    this._router.navigate(['Index']); // this will navigate to component B 

    this._liveNavigationService.selectSport(sport); 
    } 
}   

は、私はこのようなサービスからオブジェクトを発する：

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

@Injectable() 
export class LiveNavigationService { 

    public sportSelectedEvent$: EventEmitter<any> = new EventEmitter<any>(); 

    public selectSport(sport) { 
     this.sportSelectedEvent$.emit(sport); 
    } 
} 

これは、私はRC1に残ってるのhtml

<div id="breadcrumb"> 
    <div class="dropdown"> 
    <div class="wrapper"> 
     <a class="name">{{ _selectedSport ? _selectedSport.name : 'Sport'}}</a> 
     <div class="icon"><span></span></div> 
    </div> 
    <div class="list"> 
     <div class="title">Sports</div> 
     <div class="list-item" [ngClass]="{selected: sport == _selectedSport}" (click)="_selectSport(sport)" *ngFor="let sport of _sportsWithMatches">{{ sport.name }}</div> 
    </div> 
</div> 

です。

Answer 1

changeDetectorRefを使用する必要はありません。 change detection strategyはonpushに設定されていません。
ナビゲーションを完了した後にロジックを移動するとコードが機能すると思います。 あなたはRC1ルータに3.0.0ルータの場合

this._router.navigate(['Index']).then(()=>this._liveNavigationService.selectSport(sport);)

を使用している場合、あなたは、イベントを発するん

this._router.events.subscribe(e => { if(e instance of NavigationEnd && this.router.url == 'index') this._liveNavigationService.selectSport(sport);})