在 Angular 6 中停止 addEventListener

Question

我在 Angular 组件中有以下代码

export class ScheduleComponent implements OnInit, OnDestroy {
    source:any;
    connect(dateValue){  
        this.source = new 
        EventSource('http://localhost:8080/api/schedbydate?mydate='+dateValue);

        this.source.addEventListener('datarec', datarec => {
            let schedule: Notification;
            this.schedule = JSON.parse(datarex.data);
        }, false);
    }

    ngOnInit() {
        this._erdayService.getErday().subscribe((erday) => {
            this._date = erday.text();
            this._erdayService.currentMessage.subscribe(message => {        
                this._date = message;
                this.connect(this._date);}     
           , (error) => { console.error('SERVER ERROR: SELECTED DAY'); });}
        , (error) => { console.error('SERVER ERROR:getSchedulesByDate()'); });
     }

   ngOnDestroy() {
       this.source.removeEventListener('message', this.message, false); 
       //this line doesn't work because I can't access enter variable here!
        console.log("Server stopped schedule");
   }
}

问题是 this._date 最初加载 erday 和 UI 视图是根据 erday。现在，当我将 this._date 更改为 message，UI 视图已更改。
但是 erday 数据仍然显示在 UI 中并且 UI 视图在 [= 之间波动20=]erday & message 而且我无法停止 this.source.addEventListener().

我试图在 ngOnDestroy() 中销毁，但它不起作用。
我什至试过 this.source.close();.

有人可以帮助知道如何在同一源上调用另一个侦听器之前停止创建的侦听器吗？

Answer 1

您订阅了 2 个连续发出的数据源： - 第一个是 this._erdayService.currentMessage - 第二个是 this.source（当你触发 this.connect()）

所以this._date会不断变化。因此，您必须决定要保留哪个数据源。

情况 1：您想保留 this.source 作为您的数据提供者：

export class ScheduleComponent implements OnInit, OnDestroy {
    source:any;
    sourceListenerSubscription$ : Observable<any>;
    connect(dateValue){  
        this.source = new 
        EventSource('http://localhost:8080/api/schedbydate?mydate='+dateValue);
        this.sourceSubscription$ = Observable.fromEvent(this.source, 'datarec').subscribe( datarec => {
            let schedule: Notification;
            this.schedule = JSON.parse(datarex.data);
        }, false);
    }

    ngOnInit() {
        this._erdayService.getErday().subscribe((erday) => {
            this._date = erday.text();
            // take only one erday message, then listen to your spring server
            this._erdayService.currentMessage.take(1).subscribe(message => {        
                this._date = message;
                this.connect(this._date);}     
           , (error) => { console.error('SERVER ERROR: SELECTED DAY'); });}
        , (error) => { console.error('SERVER ERROR:getSchedulesByDate()'); });
     }

   ngOnDestroy() {
       this.source.removeEventListener('message', this.message, false); 
       //this line doesn't work because I can't access enter variable here!
        console.log("Server stopped schedule");
   }
}

案例 2：您想保留 erday 作为您的数据提供者：

export class ScheduleComponent implements OnInit, OnDestroy {
    source:any;
    sourceListenerSubscription$ : Observable<any>;
    connect(dateValue){  
        this.source = new 
        EventSource('http://localhost:8080/api/schedbydate?mydate='+dateValue);
        // take date once from spring server, and keep erday as data source
        this.sourceSubscription$ = Observable.fromEvent(this.source, 'datarec').take(1).subscribe( datarec => {
            let schedule: Notification;
            this.schedule = JSON.parse(datarex.data);
        }, false);
    }

    ngOnInit() {
        this._erdayService.getErday().subscribe((erday) => {
            this._date = erday.text();
            this._erdayService.currentMessage.subscribe(message => {        
                this._date = message;
                this.connect(this._date);}     
           , (error) => { console.error('SERVER ERROR: SELECTED DAY'); });}
        , (error) => { console.error('SERVER ERROR:getSchedulesByDate()'); });
     }

   ngOnDestroy() {
       this.source.removeEventListener('message', this.message, false); 
       //this line doesn't work because I can't access enter variable here!
        console.log("Server stopped schedule");
   }
}

在 Angular 6 中停止 addEventListener

Stop addEventListener in Angular 6

addeventlistener

rxjs

server-sent-events

spring-boot

angular6