Komponente bei empfangenem Ereignis ändern - angular2

Question

Ich habe ein Problem mit der Benachrichtigung der Komponente, dass Änderungen aufgetreten sind.

Nehmen wir an, ich habe eine Komponente A, die Ereignis E (durch einen Dienst) ausgibt. Komponente B ist für dieses Ereignis abonniert. Wenn ich das Ereignis console.log und die Eigenschaft von Komponente B empfangen habe, sehe ich, dass es geändert wird.

Die Vorlage der Komponente bleibt jedoch gleich.

Ich dachte, dass wenn ich ChangeDetectorRef, und changeDetectorRef.detectChanges(), Ansicht wird aktualisiert. Aber ich bekomme immer folgenden Fehler:

Attempt to use a destroyed view: detectChanges.

Ist dieser gewünschte Weg, Komponente zu verwenden und zu benachrichtigen? Gibt es etwas Besseres?

Hier ist ein kurzes Beispiel Code Ich verwende:

dies ist die Komponente B, dass

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

} }

geändert werden sollte diese Komponente A, die löst den Dienst aus, der das Ereignis ausgibt

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

ich emittieren Objekt aus dem Dienst wie folgt aus:

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

@Injectable() 
export class LiveNavigationService { 

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

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

diesen html ist

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

ich noch auf RC1 bin.

Answer 1

Ich glaube nicht, dass Sie changeDetectorRef verwenden sollten. Da change detection strategy nicht auf onpush eingestellt ist.
Ich denke, wenn Sie emittieren Logik zu nach der Navigation abgeschlossen ist, dann wird Code funktionieren. Wenn Sie rc1 Router

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

Für 3.0.0 Router verwenden, können Sie

tun

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