在不同模块中使用角度组件路由答案

【问题标题】：Using angular component routing in different modules在不同模块中使用角度组件路由
【发布时间】：2016-05-12 14:31:45
【问题描述】：

为什么模块 2 显示在模块 1 中？

我们有一个包含多个模块的 Angular 应用程序。对于某些模块，我们希望使用组件路由器。我们不知道组件将在哪个页面（url）上加载。

目前情况： 在模块 1 中，正在显示模块 2 的模板。

期望的结果： 具有相对于组件的路径，以便 '...com/someUrlWhereModule1Lives#/step2' 加载模块 1 的第 2 步
'...com/someUrlWhereModule2Lives#/step2' 加载模块 2 的第 2 步

module1.module.js

angular
.module('app.module1', ['ngComponentRouter'])
.value('$routerRootComponent', 'module1')
.component('module1', {
    templateUrl: 'module1.overview.html',
    $routeConfig: [
        {path: '/', name: 'Overview', component: 'module1Step1', useAsDefault: true},
        {path: '/step2', name: 'Overview', component: 'module1Step2'}
    ]
})
.component('module1Step1', {
  bindings: { $router: '<' },
  templateUrl: 'module1.step1.html'
})
.component('module1Step2', {
  bindings: { $router: '<' },
  templateUrl: 'module1.step2.html'
});

module2.module.js

angular
.module('app.module2', ['ngComponentRouter'])
.value('$routerRootComponent', 'module2')
.component('module2', {
    templateUrl: 'module2.overview.html',
    $routeConfig: [
        {path: '/', name: 'Overview', component: 'module2Step1', useAsDefault: true},
        {path: '/step2', name: 'Step2', component: 'module2Step2'}
    ]
})
.component('module2Step1', {
  bindings: { $router: '<' },
  templateUrl: 'module2.step1.html'
})
.component('module2Step2', {
  bindings: { $router: '<' },
  templateUrl: 'module2.step2.html'
});

Link to demo

如果需要更多信息，请告诉我。

【问题讨论】：

标签： angularjs angular-component-router

【解决方案1】：

由于您没有将 Angular 应用程序用作单个寻呼机，因此我采取了某种解决方法，您的模块（例如 module-one）启动 $routerRootComponent（例如 component-router-component）来保存路由的路由模块。 $routerRootComponent 启动另一个拥有自己的 $routeConfig 的组件（例如 module-one-overview）。

有关代码示例，请参阅我的 Plunker。

（抱歉，我不得不缩短 URL 以绕过 Stackoverflow 功能，该功能在引用 Plunker URL 时需要代码）

【讨论】：