webentwicklung-frage-antwort-db.com.de

So erhalten Sie: ID-Parameter der untergeordneten Route von der übergeordneten Komponente in Angular2

Ich versuche, den: id-Parameter in definieren zu lassen 

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

von ListComponent.

Ich versuche schon:

route: ActivatedRoute

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

von ListComponent, aber das params-Array ist leer, ich nehme an, es liegt daran, dass der: id-Parameter zu viewComponent gehört, nicht zu listComponent

Wie bekomme ich die id param in listComponent?

angularroutes
16
Fernando Popoca Ortiz

Sie können die firstChild-Eigenschaft oder die ActivatedRoute verwenden, um die untergeordnete Route abzurufen:

route.firstChild.snapshot.params['id']
21
Günter Zöchbauer

Um die Params des Kindes in die übergeordnete Komponente zu bekommen, habe ich die firstChild-Eigenschaft von ActivatedRoute verwendet, da ich nur eine untergeordnete Route habe

route: ActivatedRoute

route.firstChild.params.subscribe(params => {
  let id = +params['id'];
});
10
Fernando Popoca Ortiz

Wenn Sie rekursiv nach Kinderparams suchen, werden Sie nicht immer die gewünschten Parameter finden. Besonders beim Verschieben von Routen.

Stattdessen kann ein RxJS ReplaySubject verwendet werden, um die aktuelle untergeordnete ID zu veröffentlichen.

Erstellen Sie einen neuen Service:

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

Importieren Sie es in die untergeordnete Komponente und abonnieren Sie den Betreff der Wiedergabe:

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 Sie den Dienst für die übergeordnete Komponente und abonnieren Sie den untergeordneten Wert mithilfe der asynchronen Pipe:

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

Hier ist ein funktionierender Ausschnitt: https://stackblitz.com/edit/angular-b8xome (füge/child/42 zur Vorschau der Browser-App hinzu, um sie anzuzeigen es funktioniert)

Alternativ können Sie die Komponenten als Geschwister definieren und das übergeordnete Element als komponentenlose Route hinzufügen, z. B .: https://vsavkin.com/the-powerful-url-matching-engine-of-angular-router -775dad593b03 unter "Geschwisterkomponenten mit denselben Daten"

3
golfadas

Sie können durch route.firstChild.params['id'] weiter graben, wenn es nur eine einzige untergeordnete Route gibt, oder Sie verwenden etwas wie route.children[0].children[1].params['id'], um durch mehrere Ebenen zu graben. Es ist ein bisschen Versuch und Irrtum, wenn es darum geht, das richtige Niveau zu finden. 

0
run yards