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

时间:2016-05-12 14:31:46

标签: angularjs angular-component-router

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

我们有一个包含多个模块的角度应用。 对于某些模块,我们希望使用组件路由器。 我们不知道该组件将被加载到哪个页面(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

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

1 个答案:

答案 0 :(得分:1)

由于你使用Angular应用程序作为单个寻呼机,我已经做了一些解决方法,你的模块(例如module-one)启动了$ routerRootComponent(例如component-router-component),它保存了路由器模块。 $ routerRootComponent启动另一个拥有它自己的$ routeConfig的组件(例如,module-one-overview)。

请参阅我的Plunker以获取代码示例。

(抱歉,我不得不将URL缩短以解决在引用Plunker URL时需要代码的Stackoverflow功能)