Winkel 2 neue Router: Wie man router-Parameter einer untergeordneten Komponente?

In der neuesten version von @angular/router 3.0.0-rc.1 Die Art und Weise erhalten Sie die Parameter aus einer URL/route geändert.

Basierend auf diese Dokumentation, die Sie sollten in der Lage, das params-abonnieren Sie die params-aber in meinem Fall scheint es, dass nicht funktioniert.

Was ich erreichen will ist get-Parametern in meine übergeordneten Komponente VON Kind Routen.

Zum Beispiel lassen Sie uns sagen, dies ist mein Routen:

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    pathMatch: 'prefix',
    children: [
      {
        path: ':id',
        component: ChildComponent
      }
    ]
  }
];

Möchte ich, um die id parameter und verwenden Sie es in meinem ParentComponent.
Ich versuche also so:

export class ParentComponent implements OnInit {

  sub: any;
  constructor(
    private route: ActivatedRoute) {
    this.route = route;
   }

  ngOnInit() {

    this.sub = this.route.params.subscribe(params => {
     let id = params['id'];
     console.log(id);
   });

  }

}

Wie ich immer bin:

Undefined

Was vermisse ich hier?

InformationsquelleAutor Vassilis Pits | 2016-08-15

  1. 23

    Den ActivatedRoute hat Getter für den Zugriff auf die parent/child-route Informationen.

    Werden, um Zugriff auf das erste child-route von der übergeordneten, die Sie verwenden würden:

    this.route.firstChild.params

    Wenn Sie wollten alle das Kind Routen, die Sie möchten, verwenden Sie die children Eigenschaft. Diese gibt ein array von ActivatedRoute

    this.route.children

    Wenn man in einer Kind-route und der benötigten Parameter von der übergeordneten:

    this.route.parent.params

    Danke @Brandon!

    InformationsquelleAutor Brandon

  2. 5

    Den Kind-Parameter sind verknüpft/gespeichert mit dem Kind ActivatedRoute. Sie sind nicht auf die Eltern ActivatedRoute. So müssen Sie zunächst, um das Kind ActivatedRoute getter firstChild oder children.

    Dann, die Eltern können entweder abonnieren untergeordnete parameter-änderungen:

    import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute }               from '@angular/router';
import { Subscription }                 from 'rxjs/Subscription';

export class ParentComponent implements OnInit, OnDestroy {
   private sub: Subscription;
   constructor(private route: ActivatedRoute) {}
   ngOnInit() {
      this.sub = this.route.firstChild.params.subscribe(
        params => console.log(params.id));
   }
   ngOnDestroy() {
      this.sub.unsubscribe();
   }
}

    oder es kann ein snapshot des Kindes Parameter:

    import { Component }      from '@angular/core';
import { ActivatedRoute } from '@angular/router';

export class ParentComponent {
   constructor(private route: ActivatedRoute) {}
   someMethod() {
      console.log(this.route.firstChild.snapshot.params.id);
   }
}

    Wenn Sie wollen, um alle von den Kindern (z.B. wenn Sie mehrere Filialen), verwenden Sie ActivatedRoute.children oder ActivatedRouteSnapshot.children um ein array von Kind-ActivatedRoutes oder Kind ActivatedRouteShapshots.

    Hey @Mark , vielen Dank für die informative Antwort, aber tun müssen wir immer wieder Abmelden Parameter Abonnement?

    InformationsquelleAutor Mark Rajcok

  3. 0

    Mithilfe this.activatedRoute.snapshot.firstChild.params

    InformationsquelleAutor gildniy

  4. 0
      this.router.events.subscribe(event => {
            if (event instanceof RoutesRecognized) {
                //let strId = event.state.root.firstChild.children[0].data;
                let a = event.state.root.firstChild.children.map((route) => {
                    while (route.firstChild) {
                        route = route.firstChild;
                    }

                    return route;
                });
                console.log('Title', a[0].data.title);
                this.meta.updateTitle(a[0].data.title);
            }
            if (event instanceof NavigationEnd) {
                (<any>window).gtag('config', this.googleAnalyticsCode, {
                    'page_title' : this.titleService.getTitle(),
                    'page_path': event.urlAfterRedirects
                });
            }
        });

    InformationsquelleAutor atjoshi

Schreibe einen Kommentar