Angolare 2: definizione di un router su un altro componente rispetto a quello avviato

Question

Sto ancora lavorando su un progetto utilizzando Angular2. Se desideri maggiori dettagli sul motivo per cui ho bisogno di fare ciò che ho intenzione di spiegare, ti preghiamo di fare riferimento a questo issue.

Ho un AppComponent che viene avviato tramite bootstrap. È un componente molto semplice:

@Component({ 
    selector: 'app-view', 
    directives: [ Devtools, MainComponent ], 
    template: ` 
     <ngrx-devtools></ngrx-devtools> 
     <main-cmp></main-cmp> 
    ` 
}) 
export class AppComponent { } 

Questo componente comprende un'altra: MainComponent (tramite il selettore main-cmp). Per alcuni motivi, desidero configurare il routing in MainComponent.

Ecco il codice:

@Component({ 
    selector: 'main-cmp', 
    directives: [ ROUTER_DIRECTIVES, NavComponent ], 
    template: ` 
     <h1>App</h1> 
     <nav-cmp></nav-cmp> 
     <router-outlet></router-outlet> 
    ` 
}) 
@RouteConfig([ 
    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true }, 
    { path: '/medias', name: 'Medias', component: MediasComponent } 
]) 
export class MainComponent { 
    constructor (private router:Router, private store:Store<AppStore>) { 
     router.subscribe(url => store.dispatch(changeUrl(url))); 
    } 
} 

Infine, MainComponent include NavComponent che è un navigatore molto semplice.

Il problema è che, con questa configurazione, ho riscontrato questo problema: EXCEPTION: Component "AppComponent" has no route config. in [['Home'] in NavComponent@2:15].

Ovviamente, se si sposta la logica del mio router su AppComponent, tutto funziona correttamente.

Quindi la mia domanda è: c'è un modo per fare routing roba in un altro componente rispetto a quello che viene avviato?

Grazie :).

Answer 1

Sembra che non sia possibile perché il metodo generate della classe RouteRegistry si basa esplicitamente (hardcoded) sul componente root. Vedere questa riga nel codice sorgente:

• https://github.com/angular/angular/blob/master/modules/angular2/src/router/route_registry.ts#L345

Ecco il codice che trhows l'errore:

RouteRegistry.prototype._generate = function(linkParams, 
     ancestorInstructions, prevInstruction, _aux, _originalLink) { 
    (...) 
    var parentComponentType = this._rootComponent; // <---- 
    (...) 

    var rules = this._rules.get(parentComponentType); 
    if (lang_1.isBlank(rules)) { // <---- 
    throw new exceptions_1.BaseException("Component \"" + 
     lang_1.getTypeNameForDebugging(parentComponentType) + 
     "\" has no route config."); 
    } 

    (...) 
}; 

Questo metodo viene indirettamente utilizzata dal metodo della direttiva RouterLink_updateLink .

Ecco corrispondente analisi dello stack:

RouteRegistry._generate (router.js:2702) 
RouteRegistry.generate (router.js:2669) 
Router.generate (router.js:3174) 
RouterLink._updateLink (router.js:1205) 

Vedere la plunkr ho usato per eseguire il debug del problema: https://plnkr.co/edit/8JojtgZmc8kA9ib6zvKS?p=preview.

Answer 2

Che ne dici di una soluzione alternativa: utilizzare root come percorso secondario?

@Component({ 
    selector: 'app', 
    directives: [ ROUTER_DIRECTIVES ], 
    template: ` 
    <router-outlet></router-outlet> 
    ` 
}) 
@RouteConfig([ 
    {path: '/...', as: 'Main', component: MainComponent, useAsDefault: true } 
]) 
export class App { } 

@Component({ 
    selector: 'main-cmp', 
    directives: [ ROUTER_DIRECTIVES ], 
    template: ` 
     <h1>App</h1> 
     <router-outlet></router-outlet> 
    ` 
}) 
@RouteConfig([ 
    { path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true }, 
]) 
export class MainComponent { }