angular - 超时后出现 ObjectUnsubscribedError

Question

我在服务组件中使用事件 EventEmitter，如下所示:

export class SettingsService {
    public sidebarColor = '#D80B0B';
    public sidebarColorUpdate: EventEmitter<string> = new >EventEmitter();

然后我从其他组件订阅它，如下所示:

this.settingsService.sidebarColorUpdate.subscribe((color: string) => {
    if (color === '#fff') {
        this.normalFontColor = 'rgba(0,0,0,.6)';
        this.dividerBgColor = 'rgba(0,0,0,.1)';
    } else {
        this.normalFontColor = 'rgba(255,255,255,.8)';
        this.dividerBgColor = 'rgba(255, 255, 255, 0.5)';
    }
 });

然后在ngOnDestroy中取消订阅。这很有效，但当 session 超时并且路由器默认返回登录页面时，问题就会出现。再次登录后出现此错误

message: "object unsubscribed" name: "ObjectUnsubscribedError"

为什么会发生这种情况？

Answer 1

我不知道为什么会出现此错误，但这不是这里的主要问题。问题是您不应在服务中使用 EventEmitter，因为 it does not guarantee to remain Observable .

这是使用 Observables 解决您的问题的正确解决方案:

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

export class SettingsService {
    // Source variable should be private to prevent subscribing to it
    private sidebarColorUpdatedSource = new Subject<string>();
    // Expose an observable to allow subscribers listen to the updates
    sidebarColorUpdated$ = this.sidebarColorUpdatedSource.asObservable();

    // Expose a public method for updating the sidebar color
    updateSidebarColor(color: string): void {
        // Update the color

        // Notify subscribers
        this.sidebarColorUpdatedSource.next(color);
    }
}

组件:

private sidebarColorUpdated$: Subscription;

ngOnInit(): void {
    this.sidebarColorUpdated$ = this.settingsService.sidebarColorUpdated$.subscribe(color => {
        // Do whatever you need
    });
}

ngOnDestroy(): void {
    if (this.sidebarColorUpdated$)
        this.sidebarColorUpdated$.unsubscribe();
}

当您需要更新侧边栏颜色时，调用 SettingsService.updateSidebarColor(color: string) 方法，每个订阅者都会收到更改通知。