Wie zu bekommen :param id der Kind-route von parent-Komponente in Angular2

Ich versuche zu bekommen, die : - id, param, definiert in

RouterModule.forRoot([
  {
    path: 'orders',
    component: ListComponent,
    children: [
      {
        path: 'view/:id',
        component: ViewComponent
      },
    ]
  }
])

vom ListComponent.

Ich bereits versucht:

route: ActivatedRoute

route.params.subscribe(params => {
  let id = +params['id'];
})

vom ListComponent, aber die params-array ist leer, ich nehme an, weil die id :der Parameter gehört zu viewComponent nicht listComponent

Wie bekomme ich die id param in listComponent?

InformationsquelleAutor Fernando Popoca Ortiz | 2017-01-09

  1. 20

    Können Sie die firstChild - Eigenschaft oder die ActivatedRoute zu bekommen, der Kind-route:

    route.firstChild.snapshot.params['id']
    sieht aus wie die Eigenschaft routerState nicht auf ActivatedRoute, auch ich möchte die id innerhalb parent-Komponente keine untergeordneten Komponente, so dass ich die Strecke.firstChild.params
    Ich benutzte route.snapshot.firstChild, nicht-route.firstChild.snapshot Auch überprüfen firstChild definiert sich in Erster
    es funktioniert, aber ich erhalte eine Fehlermeldung in der Konsole ilke " - Fehler FEHLER: ExpressionChangedAfterItHasBeenCheckederror: Ausdruck geändert hat, nachdem es überprüft wurde. Vorheriger Wert: 'true'. Aktueller Wert: 'false'"
    genial, hat mir sehr geholfen..
    Erstaunlich, Sparte ich viel Zeit. Danke!!!

    InformationsquelleAutor Günter Zöchbauer

  2. 10

    Um das Kind params innerhalb der übergeordneten Komponente, die ich verwendet, die firstChild-Eigenschaft ActivatedRoute, weil ich nur auf der Kind-route

    route: ActivatedRoute

route.firstChild.params.subscribe(params => {
  let id = +params['id'];
});
    Die einzig richtige Antwort, weil die Dinge nie geschehen synchron in Eckige, und diese Antwort deckt das Abonnement (async).
    Beste Antworten bisher, es umfasst das abonnieren zeigen.

    InformationsquelleAutor Fernando Popoca Ortiz

  3. 2

    Rekursiv Suche nach Kind params wird nicht immer bekommen Sie die params die Sie suchen. Speziell beim verschieben von Routen rund um.

    Statt, eine RxJS ReplaySubject können verwendet werden, um die Veröffentlichung der aktuellen child-id.

    Erstellen Sie einen neuen service:

    @Injectable()
export class ChildIdService  {
  current$ = new ReplaySubject<number>();
}

    Importieren auf die Kind-Komponente und abonnieren Sie den replay-Thema:

    export class ChildComponent implements OnInit {
  constructor(private ar: ActivatedRoute, public ci: ChildIdService){}

  ngOnInit(){
    this.ar.params.map(params => +params.id).subscribe(this.ci.current$);
  }
}

    Importieren des Dienstes auf der übergeordneten Komponente und die Verwendung des async-pipe zu abonnieren, um den Kind-Wert:

    <span>Mother component child ID: {{ci.current$ | async}}</span>

    Hier ist ein funktionierendes snippet: https://stackblitz.com/edit/angular-b8xome (hinzufügen /Kind/42, um die browser-app Vorschau, um zu sehen, dass es funktioniert)

    Alternativ definieren Sie die Komponenten, die als Geschwister und fügen Sie den Eltern als componentless route, ex.: https://vsavkin.com/the-powerful-url-matching-engine-of-angular-router-775dad593b03 unter "Geschwister-Komponenten Mit Gleichen Daten"

    Irgendein besonderer Grund für die Verwendung ReplaySubject anstelle von anderen Arten von Subjekten? Ich bin immer noch versuchen zu begreifen, der usecases für Sie, so zu verstehen, es in diesem Beispiel würde helfen.
    ReplaySubject wird merken, das bisherige Ergebnis, so dass die observable heißen für alle zukünftigen Abos. Dies ist hilfreich, wenn Sie sich auf das beobachtbare in mehr als einem Ort, und wollen Zugriff auf die zuvor schob Ergebnisse.

    InformationsquelleAutor golfadas

  4. 0

    Sie können immer Graben durch die route.firstChild.params['id'] wenn es nur ein Kind Weg oder so etwas wie route.children[0].children[1].params['id'] zu Graben, durch mehrere Ebenen mit Hilfe der Klammer-notation, um den Zugriff Geschwister-Routen. Es ist ein bisschen von Versuch und Irrtum, wenn es um die Suche nach der richtigen Ebene ist.

    danke das Tue ich ja bereits

    InformationsquelleAutor run yards

Schreibe einen Kommentar