Spring boot 停止角度6中的addEventListener

我有下面的代码在角度分量

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

问题是这个。_date最初加载erday，UI视图根据erday。现在，当我将this.\u date更改为消息时，UI视图将更改。
但是，erday数据仍然显示在UI中，UI视图在erday和消息之间波动，我无法停止this.source.addEventListener（）

我试图在Ngondestory（）中进行破坏，但没有成功。
我甚至尝试了这个.source.close（）

---

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

您订阅了两个连续发射的数据源： -第一个是

this.\u erdayService.currentMessage

-第二个是this.source（当您触发this.connect（）时）

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

案例1：您希望保留此.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");
   }
}

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

导出类ScheduleComponent实现OnInit、OnDestroy{
资料来源：任何；
sourceListenerSubscription$：可观察；
连接（日期值）{
this.source=new
事件源（'http://localhost:8080/api/schedbydate?mydate=“+日期值）；
this.sourceSubscription$=Observable.fromEvent（this.source，'datarec'）。subscripte（datarec=>{
出租时间表：通知；
this.schedule=JSON.parse（datarex.data）；
}，假）；
}
恩戈尼尼特（）{
此._erdayService.getErday（）.subscribe（（erday）=>{
此._date=erday.text（）；
//只接收一条erday消息，然后收听您的spring服务器
此.u erdayService.currentMessage.take（1）.subscribe（message=>{
此日期=消息；
this.connect（this._date）；}
，（error）=>{console.error（'SERVER error:SELECTED DAY'）；}；}
，（error）=>{console.error（'SERVER error:getSchedulesByDate（）'）；}）；
}
恩贡德斯特罗（）{
this.source.removeEventListener（'message'，this.message，false）；
//此行不起作用，因为我无法在此处访问enter变量！
log（“服务器停止计划”）；
}
}

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

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

导出类ScheduleComponent实现OnInit、OnDestroy{
资料来源：任何；
sourceListenerSubscription$：可观察；
连接（日期值）{
this.source=new
事件源（'http://localhost:8080/api/schedbydate?mydate=“+日期值）；
//从spring服务器获取一次日期，并将erday作为数据源
this.sourceSubscription$=Observable.fromEvent（this.source，'datarec'）.take（1.subscription）（datarec=>{
出租时间表：通知；
this.schedule=JSON.parse（datarex.data）；
}，假）；
}
恩戈尼尼特（）{
此._erdayService.getErday（）.subscribe（（erday）=>{
此._date=erday.text（）；
这是.\u erdayService.currentMessage.subscribe（message=>{
此日期=消息；
this.connect（this._date）；}
，（error）=>{console.error（'SERVER error:SELECTED DAY'）；}；}
，（error）=>{console.error（'SERVER error:getSchedulesByDate（）'）；}）；
}
恩贡德斯特罗（）{
this.source.removeEventListener（'message'，this.message，false）；
//此行不起作用，因为我无法在此处访问enter变量！
log（“服务器停止计划”）；
}
}

我认为这与Angular无关，只是看看这个不确定我是否得到了你想要的：-你的

this.\u erdayService.getErday（）

发出了多少信息？-如果您想用erday替换日期，订阅EventSource的目的是什么？用例：我有一个表，其中的数据来自MySql DB，我使用Spring boot打开了一个SSEemiiter流，它有一个Select查询，日期=？在WHERE子句中，Angular要听的。默认日期应为事件日期。但我有一个日期选择器，它将更改为旧日期，以查看旧日期数据，它是常量。因此，事件日的数据只会更改，而不会更改旧日期。但是目前上面的代码是波动的，没有关闭。我希望您理解我的用法casesourceListener$，我应该如何声明它？我得到

this.sourceListener$.unsubscribe（）作为错误。需要更正什么？仍然
this.sourceSubscription$.unsubscripte（）sourceSubscription$后，代码>作为错误：可观察
和
datarex.data
到
datarec.data
，我认为
Unsubscribe
不是
可观察的
的一部分。你能重新验证你的代码吗？事实上你可以取消订阅。这里有一个例子：
constsource=Observable.interval（200）；让subscription=source.subscripte（x=>console.log（x））Observable.timer（2000）.subscripte（=>subscription.unsubscribe（））
但在您的情况下，我认为存在竞争条件，取消订阅发生在订阅之前。正在更新两种方案的代码。很抱歉，答复太晚。他们工作了。感谢您多次提出代码建议。