Untergeordnete Route Änderungen in Master/Detailbeispiel in Angular 2

Question

abonnieren Ich habe ein Problem mit dem Routing in einer Master/Detailansicht. Wenn ich auf die Route gehe /master sollte die InfoComponent einige allgemeine Informationen zeigen. Und wenn ich gehe zu /master/1 die DetailsComponent sollte einige Daten für das Element mit ID 1 zeigen. In beiden Fällen sollte MasterComponent entweder die ausgewählte ID oder nichts zeigen.

Ich kann das ziemlich gut funktionieren. Aber das Problem ist, dass ich auf die ausgewählten :id in OnInit in MasterComponent abonnieren möge, so dass ich es dort hervorheben kann, etwa so:

this.selectedId = this.route.params.map((params: Params) => params["id"]) 

Aber das funktioniert nicht, da :id eine param Kind Route ist. Und ich kann this.route.firstChild nicht verwenden, da firstChild eine andere Route sein wird, abhängig davon, ob InfoComponent oder DetailsComponent angezeigt wird.

Kann ich eine Observable (von :id) bekommen, die sich ändert, wenn sich MasterComponent zwischen dem Anzeigen der beiden untergeordneten Komponenten ändert?

Das ist mein Routing-Modul:

@NgModule({ 
    imports: [ 
     RouterModule.forChild([ 
      { 
       path: "master", 
       canActivate: [AuthenticationGuardService], 
       children: [ 
        { 
         path: "", 
         component: MasterComponent, 
         children: [ 
          { 
           path: "", 
           component: InfoComponent 
          }, 
          { 
           path: ":id", 
           component: DetailsComponent 
          } 
         ] 
        } 
       ] 
      } 
     ]) 
    ], 
    exports: [ 
     RouterModule 
    ] 
}) 
export class MyRoutingModule { } 

Also, was Ich mag würde, ist wie etwas zu tun:

this.selectedId = this.route.params.map((params: Params) => params["id"]) 

Wo this.selectedId ein Observable ist, der den Wert hat 1, wenn die Route /master/1 ist oder der Wert null, wenn die Route /master ist.

Answer 1

Entweder

this.route.firstChild.params.map(...) 

oder einen Shared-Service verwenden, um die params Änderungen vom Kind zum Vater zu kommunizieren. Beispiele finden Sie unter https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service.