延迟加载模块之间的 pub/sub 角度答案

【问题标题】：pub/sub in angular between lazy loaded modules延迟加载模块之间的 pub/sub 角度
【发布时间】：2017-12-07 11:27:03
【问题描述】：

我已经定义了一个搜索服务如下。

import { Subject } from "rxjs/Subject";

export class SearchTextEmitter extends Subject<string>{
    constructor() {
        super();
    }
    emit(value) { super.next(value); }
}

export class SearchTextService {
   searchText = new SearchTextEmitter();
}

我正在使用 emit 发布并订阅一个子组件，该子组件是父组件的延迟加载子组件。

如果子组件被声明，并作为一个模块包含，搜索文本正确地向下传播。

export const routes: Routes = [
    {
        path: "",
        redirectTo: "dashboard",
        pathMatch: "full",
    },
    {
        path: "",
        component: FullLayoutComponent,
        data: {
            title: "Home"
        },
        children: [
            {
                path: "dashboard",
                component: ClearingDashboardComponent
...
}

当子模块懒加载时如下...

// instead of                     
// component: ClearingDashboardComponent

loadChildren: () => new Promise(resolve => {
    (require as any).ensure([],
        require => {
            resolve(require("./dashboard/dashboard.module").DashboardModule);
        },
        "dashboard");
})

事件不再向下传播。
我怀疑实际上正在使用不同的服务实例。

如何向下共享发布/订阅到延迟加载的子公司？

【问题讨论】：

当你有延迟加载的孩子时，你可能会陷入拥有不同实例的陷阱。如果您在更高级别导入服务，比如说在 app.module 级别，确保您将其作为单例导入，您的问题将得到解决:)
有没有办法延迟加载，和只有一个实例？我不想求助于使用 jquery 事件...
当然可以。正如我在之前的评论中所说。从您在组件外部导入服务的那一刻起（例如在 app.module 级别导入它），它肯定是一个单例。只要您不将其导入可以延迟加载的共享组件上，就可以了
你想把它作为答案发布吗，我不介意编辑它......你是对的，如果搜索服务是在共享模块中声明的，而不是在应用程序中声明 provided。模块它可能不是单例...

标签： angular typescript

【解决方案1】：

您在这里面临的问题是因为您很可能在延迟加载的共享组件上导入服务。问题是它会创建一个新的服务实例，并且您会对这些事件产生意外行为。您应该在更高级别导入服务，例如在 app.module 级别。这样，服务肯定会是单例的，一切都会按预期工作:)

【讨论】：