在不同模块中使用角分量路由

Question

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

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

当前情况:模块1中的模块2的模板正在显示。

所期望的结果：具有相对于组件的路径，因此模块1的‘.com/ of Module1Lives#/ step 2’加载模块1的步骤2

‘.com/ of Module2Lives#/ step 2’加载模块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'
});

链接到演示

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

Answer 1

由于您正在使用您的角应用程序作为一个单一的寻呼机，我已经做了一些解决办法，您的模块(例如模块-一个)启动$routerRootComponent (例如组件-路由器-组件)，以保持模块的路由。$routerRootComponent启动另一个组件(例如模块一概述)，它有自己的$routeConfig。

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

(对不起，我不得不缩短URL以绕过Stackoverflow特性，在引用柱塞URL时需要代码)