在延迟加载的模块之间的角度中的pub / sub

时间:2017-12-07 11:27:04

标签: angular typescript

我已按如下方式定义了搜索服务。

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

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

如何将pub / sub向下分享到延迟加载的子公司?

1 个答案:

答案 0 :(得分:1)

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