Verwenden der Winkelkomponentenführung in verschiedenen Modulen

Question

Warum wird Modul 2 in Modul 1 angezeigt?

Wir haben eine eckige App, die mehrere Module enthält. Für einige Module möchten wir einen Komponenten-Router verwenden. Wir wissen nicht, auf welcher Seite (URL) die Komponente geladen wird.

Aktuelle Situation: In Modul 1 werden die Vorlagen für Modul 2 angezeigt.

Gewünschtes Ergebnis: Haben Pfade relativ zu der Komponente, so dass '... com/someUrlWhereModule1Lives #/Schritt 2' Lasten 2 des Moduls Schritt 1
' ... com/someUrlWhereModule2Lives #/Schritt 2' Lasten Schritt 2 des Moduls 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

Wenn mehr Informationen benötigt werden, lassen Sie es mich wissen.

Answer 1

Da Sie Ihre Angular App als einzigen Pager verwenden, habe ich eine Art Problemumgehung gemacht, wo Ihr Modul (zB Modul-Eins) die $ routerRootComponent (zB Komponente-Router-Komponente) initiiert, die das Routing von die Module. Die $ routerRootComponent startet eine andere Komponente (zB module-one-overview), die ihre eigene $ routeConfig hat.

Siehe mein Plunker für ein Codebeispiel.

(Entschuldigung, ich musste eine kurze URL eingeben, um die Stackoverflow-Funktion zu umgehen, die Code erfordert, wenn auf eine Plunker-URL verwiesen wird)