Angular 路由器 : how to pass data to lazy loading module?

Question

我的 Angular 应用程序的模块有以下路由路径:

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: 'documents',
                data: { myObject: MyConstants.OPTION_ONE },
                children: [
                    {
                        path: ':ID_DOC',
                        children: [
                            { path: 'edit', component: EditDocumentComponent },
                            { path: '', component: DocumentDetailsComponent },
                        ]
                    },
                    { path: 'add', component: AddDocumentComponent },
                    { path: '', component: DocumentsListComponent }
                ]
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})

export class DocumentsManagementRoutingModule {
}

如您所见，我使用 data 属性将一些数据传递到“文档”中的每个路径，因此我可以从路由路径中声明的任何组件中获取它:

例如，我如何在 DocumentDetailsComponent 中获取数据:

export class DocumentDetailsComponent implements OnDestroy {
    private obsData: Subscription;
    private option: any;

    constructor(private route: ActivatedRoute) {
        this.obsData = this.route.data.subscribe(data => {
            this.option = data['myObject'];
        });
    }

    ngOnDestroy(): void {
        this.obsData.unsubscribe();
    }
}

现在我改变了整个应用程序的路由结构，我从其他模块调用上面的模块，在延迟加载中，使用 loadChildren 属性。我以同样的方式传递数据:

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: 'users',
                loadChildren: 'app/documents/documents.module#DocumentsModule',
                data: { myObject: MyConstants.OPTION_ONE }},
            {
                path: ':ID_USER',
                children: [
                    { path: 'edit', component: EditUserComponent },
                    { path: '', component: UserDetailsComponent },
                ]
            },
            { path: 'add', component: AddUserComponent },
            { path: '', component: UserListComponent }
        ])
    ],
    exports: [
        RouterModule
    ]
})

export class UsersManagementRoutingModule {
}

我对调用 DocumentsManagementRoutingModule 的所有其他模块执行相同操作，将 myObject 属性更改为 MyConstants.OPTION_TWO，MyConstants .OPTION_THREE 等等，根据我的需要。

那么，由于不知道调用懒加载模块的模块及其相关路径，如何从调用模块获取data属性呢？

Answer 1

我想我可能明白问题在问什么。

---

问题

这是@smartmouse提供的plunker的路由图。

- home
  - shop
  - contact
    - map
  - about

home 路由配置中配置了一个data 对象。直接子路由可以访问这个数据对象。问题是，非直接子 map 想要访问 data 对象，但显然，它不能。

我们可以知道@smartmouse 想要进一步插入 -- 嵌套的非直接子路由可以访问来自祖先的数据。

为什么不能？

查看我修改过的plunker。 https://plnkr.co/edit/FA7mGmspUXHhU8YvgDpT

你可以看到我为contact定义了一个额外的子组件DefaultComponent。它表明它是路由 contact 的直接和默认子节点，可以解释为它也是上级路由 home 的直接子节点。因此，它可以访问 data 对象。

解决方案

再看看我提供的plunker。

NOTE: The Angular packages I'm using is v4.3.0

方法#1——查询参数

我在 home.component.ts 中为 contact 路由定义了一些查询参数。您可以看到如何使用它。

优点:

• 您可以跨任何级别的路由访问查询参数。
• 与延迟加载模块配合良好

缺点:

• 您不能在路由配置中定义查询参数。

  但是您可以使用一些路由生命周期钩子(Hook)来为目标祖先路由定义它们

方法#2——服务

在作为单例模式的应用程序的顶层定义数据共享服务。另外，使用一些实用程序来防止它被启动两次。然后您可以将一些数据放入其中，并在任何地方检索它。

优点:

• 通过 DI 全局可见；
• 与延迟加载模块配合良好

缺点:

• 您不能更新路由配置中的数据。
• 你必须在别处定义数据。如果你不能控制它的来源，它可能是一个问题。

方法#3——路由解析

有人可能会发现我还在plunker 中定义了resolve 示例代码。这是为了表明它具有与路由配置中的 data 相同的行为，除了它实际上是用于动态数据检索。

https://vsavkin.com/angular-router-understanding-router-state-7b5b95a12eab#5400
The data property is used for passing a fixed object to an activated route. It does not change throughout the lifetime of the application. The resolve property is used for dynamic data.

以@smartmouse 的 plunkr 为例。

我们在“home”路由配置中定义了data。我们可以在ContactModule中为联系人的默认路由定义一个数据解析器，代理从上级路由传过来的数据。然后它的所有直接子路由都可以访问解析的数据对象。

优点:

• 适用于任何级别的嵌套路由
• 与延迟加载模块配合良好

缺点:

• 您可能必须在其子路由想要访问该数据的每个父路由中声明该 resolve 属性。这是一种肮脏的工作。

---

Angular 的普遍使用目前还没有完美和通用的解决方案。有人应该权衡利弊并选择合适的。