angular - 未收到来自跨模块订阅 observable 的事件

Question

我正在使用 Angular 9。我有一个名为 AppModule 的根 NgModule，它引导包含我的应用程序的核心布局和框架的 AppComponent。在 AppModule 中，我还导入了 NotificationComponent，它通过订阅 NotificationService 中的可观察对象（我也导入到 AppModule）来直观地显示通知，并且在引导 AppComponent 的 HTML 模板中引用了 NotificationComponent。

然后我延迟加载 ProjectDetailModule ，它声明了 ProjectDetailComponent 也导入了 NotificationService 以便它可以触发通知。但是，当我在 ProjectDetailComponent 中使用 NotificationService 触发通知时，NotificationComponent 不会随该通知更新。有什么想法我哪里出错了吗？

app.module.ts：

import { AppComponent } from './app.component';
import { NotificationComponent } from './_shared/notifications/notification.component';
import { NotificationService } from './_shared/notifications/notification.service';
@NgModule({
    declarations: [NotificationComponent],
    imports: [
        RouterModule.forRoot([
            {
                path: 'projects/:id',
                loadChildren: () => import('./project-detail/project-detail.module').then(m => m.ProjectDetailModule)
            }
        ])
    ],
    providers: [NotificationService],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html：

<div>
<header><img src="assets/logo.png" /></header>
<notification></notification>
<div>

项目详细信息.component.ts：

import { NotificationService } from './../_shared/notifications/notification.service'; 
export class ProjectDetailComponent implements OnInit {
    constructor(private notificationService: NotificationService) {}

    ngOnInit(): void {
        this.notificationService.sendNotification('Project saved');
    }
}

通知.service.ts：

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class NotificationService {
    private subject = new Subject<any>();

    sendNotification(message: string, type: string = null): void {
        this.subject.next({ text: message, type: type });
    }
    
    getNotification(): Observable<any> {
        return this.subject.asObservable();
    }
}

通知.component.ts：

import { Component, OnDestroy } from '@angular/core';
import { NotificationService } from './notification.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.css']
})

export class NotificationComponent implements OnDestroy {
    public type: string = '';
    public message: any;
    public show: boolean = false;
    public sub: Subscription;

    constructor(
        private notificationService: NotificationService
    ) {
        this.sub = this.notificationService
                        .getNotification()
                        .subscribe(message => {
                            this.message = message;
                            this.type = message.type;
                            this.show = true;
                        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

标签： angularlazy-loadingrxjs-observables