2016-05-12 69 views
0

爲什麼模塊2顯示在模塊1內部?在不同模塊中使用角度分量路由

我們有一個包含多個模塊的角度應用程序。 對於一些模塊,我們想使用組件路由器。 我們不知道將在哪個頁面(url)上加載組件。

當前情況: 模塊1內部正在顯示模塊2的模板。

期望的結果: 有無使得 '... COM/someUrlWhereModule1Lives#/ step2' 的負載步驟模塊的2 1
' ... 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

因爲你是使用你的Angular應用程序作爲單個尋呼機的情況下我已經做了一些解決方法,你的模塊(例如模塊一)啓動$ routerRootComponent(例如組件路由器組件)模塊。 $ routerRootComponent啓動具有它自己的$ routeConfig的另一個組件(例如module-one-overview)。

查看我的Plunker的代碼示例。

(對不起,我不得不通過短URL來解決指向Plunker URL時需要代碼的Stackoverflow功能)