收到事件时更改组件 - angular2

Question

我在通知组件发生更改时遇到问题。

假设我有一个组件 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);
   }
}

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

我还在 RC1 上。

Answer 1

我认为您不应该使用changeDetectorRef。因为change detection strategy 没有设置为 onpush。
我认为如果您将发出逻辑移动到导航完成后，那么您的代码将起作用。 如果你使用的是 rc1 路由器

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

对于 3.0.0 路由器你可以这样做

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