Остановите addEventListener в Angular 6 - PullRequest
Новая
       22

Остановите addEventListener в Angular 6

0 голосов
/ 05 июля 2018

У меня есть код ниже в угловом компоненте 

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 , а представление пользовательского интерфейса соответствует erday . Теперь, когда я изменяю this._date на сообщение , представление пользовательского интерфейса изменяется.
Но все же данные erday отображаются в пользовательском интерфейсе, и представление пользовательского интерфейса колеблется между erday & message и я не могу остановить this.source.addEventListener () .

Я пытался уничтожить в ngOnDestroy () , но он не работает.
Я даже пытался this.source.close (); .

Может ли кто-нибудь помочь узнать, как остановить созданного слушателя перед вызовом другого слушателя из того же источника?

1 Ответ

0 голосов
/ 05 июля 2018

Вы подписаны на 2 источника данных, которые излучают непрерывно: - первое существо this._erdayService.currentMessage - Второй это this.source (когда вы запускаете this.connect ())

Так что this._date будет постоянно меняться. Таким образом, вы должны решить, какой источник данных вы хотите сохранить.

Случай 1: Вы хотите сохранить этот источник в качестве поставщика данных: 

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: Вы хотите остаться в качестве поставщика данных: 

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