Использование маршрутизации угловых компонентов в разных модулях

Question

Почему модуль 2 отображается внутри модуля 1?

У нас есть одно угловое приложение, которое содержит несколько модулей. Для некоторых модулей мы хотели бы использовать компонентный маршрутизатор. Мы не знаем, на какой странице (url) компонент будет загружен.

Текущая ситуация: Внутри модуля 1 отображаются шаблоны для модуля 2.

Желаемый результат: Есть пути относительно компонента, так что '... ком/someUrlWhereModule1Lives #/Шаг 2' нагрузки шаг 2 модуля 1
' ... ком/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

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

Answer 1

Поскольку вы используете Google Android в качестве одного пейджера, я сделал какое-то обходное решение, когда ваш модуль (например, модуль-один) инициирует $ routerRootComponent (например, компонент-маршрутизатор-компонент), который содержит маршрутизацию модулей. $ RouterRootComponent инициирует другой компонент (например, модуль-один-обзор), который имеет собственный $ routeConfig.

См. Мой код Plunker для примера кода.

(Извините, я должен был указать короткий URL, чтобы обойти функцию Stackoverflow, которая требует кода при обращении к URL-адресу Plunker)