Background

我正在Angular 5中编写一个企业应用程序 . 我正在研究的一个大屏幕有许多选项卡和子组件 . 大多数客户端将获得相同版本的屏幕，但一两个客户端需要在几个选项卡下进行自定义更改 .

Question

如何为客户想要更改的那些选项卡动态加载自定义组件？我知道我可以使用异步延迟模块加载来加载特定于该客户端的全新屏幕，但似乎只更换具有更改而不是整个屏幕的子组件会更有效 .

异步加载似乎是要走的路，因为您可以使用canLoad来为每个客户端加载不必要的代码 . 在子级别，如果您在同一子级别有多个组件进行交换，则可以尝试使用带有异步模块的命名路由器出口作为子组件 . 但是，我遇到了bug with async loading and the named router outlets .

有没有其他想法？

Code

这是我在探索上述想法时尝试的路线的代码 . 核心屏幕是父级别屏幕，异步加载 .

export const routes: Routes = [
{
    path: '',
    component: CoreScreenComponent,
    children: [
        { 
            path: 'x-core',
            loadChildren: "app/components/core-component-x/core-component-x.module#CoreComponentXComponent",
            outlet: 'x' 
        },
        { 
            path: 'x-client',
            loadChildren: "app/components/client-component-x/client-component-x.module#ClientComponentXComponent",
            outlet: 'x' 
        },
        { 
            path: 'y-core', 
            loadChildren: "app/components/core-component-y/core-component-y.module#CoreComponentYComponent",
            outlet: 'y'
        },
        { 
            path: 'y-client',
            loadChildren: "app/components/client-component-y/client-component-y.module#ClientComponentyComponent",
            outlet: 'y' 
        },
    ]
}];
javascript angular typescript angular5