Angular2,取消了ngOnDestroy中的事件

Question

在我的应用程序中,我有一些通过的方式进行通信的组件 EventService.

@Injectable()
export class EventService {
  public myEvent: EventEmitter<any> = new EventEmitter();
  constructor() {}
}

EmitterComponent当单击按钮时,此服务将注入一个发出事件的服务

@Component({
  selector: 'emitter',
  template: `<button (click)="onClick()">Click me</button>`,
})
export class EmitterComponent {
  constructor(private eventService:EventService) {}
  onClick() {
    this.eventService.myEvent.emit();
  }
}

并且在ReceiverComponent订阅事件中并且对于每个收到的事件增加一个计数器

@Component({
  selector: 'receiver',
  template: `Count: {{count}}`,
})
export class ReceiverComponent {
  public count = 0;
  constructor(private eventService:EventService) {
    this.eventService.myEvent.subscribe(() => this.count++;);
  }
}

该应用程序有多个视图(在这个例子中只有两个):PageA和PageB.EmitterComponent并且ReceiverComponent在PageA.每次进入PageB并返回时PageA,ReceiverComponent都会创建一个new ,当我单击该按钮时EmitterComponent,ReceiverComponent会执行多次事件回调函数.

为了避免这种情况我退订ReceiverComponent来自myEvent于ngOnDestroy

ngOnDestroy() {
  this.eventService.myEvent.unsubscribe();
}

但这会导致以下异常

EXCEPTION: Error during instantiation of ReceiverComponent!.
ORIGINAL EXCEPTION: Error: Cannot subscribe to a disposed Subject

我怎么能避免这种情况？如何正确取消订阅？

为了更好地理解,我创建了这个plunker,您可以在控制台中看到错误和一些注释.

Answer 1

你从中获得订阅.subscribe().使用其unsubscribe()方法取消订阅.

@Component({
  selector: 'receiver',
  template: `Count: {{count}}`,
})
export class ReceiverComponent {
  public count = 0;
  private subscription;
  constructor(private eventService:EventService) {
    this.subscription = this.eventService.myEvent.subscribe(() => this.count++;);
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

也可以看看

• 如何以角度2取消订阅多个订阅者

• timer.unsubscribe不是Angular2函数