Wie pass-und get-parameter mit routerLink im Winkel 2?

Möchte ich einen Wert übergeben mit der url mit routerLink. Und Lesen Sie den Wert auf einer anderen Seite.
Wie ich haben Sie Produkt-Liste. Auf auswählen des ersten Datensatzes die id des Datensatzes übergeben, Produkt-detail-Seite. Nach dem Lesen, dass productId möchte ich zeigen, detail des Produkts.

Also, Wie kann ich den pass und Holen Sie sich die parameter?

InformationsquelleAutor MohammedAshrafali | 2017-02-13

  1. 12

    ich nehme an, Sie haben einige code wie dieser:

    { path: 'product/:id', component: ProductDetailComponent }

    in ProductList Vorlage

    <a [routerLink]="['/product', id]">Home</a>

    oder

    <a [routerLink]="['/product', 5]">Home</a>

    wo id ist eine variable, vielleicht haben Sie es in einer Schleife.

    in ProductDetailComponent:

    constructor(
  private route: ActivatedRoute,
  private router: Router
) {}
ngOnInit() {

  this.route.params
    //(+) converts string 'id' to a number
    .switchMap((params: Params) => this.yourProductService.getProductById(+params['id']))
    .subscribe((product) => this.product = product);
}

    Router Dokument: https://angular.io/docs/ts/latest/guide/router.html

    InformationsquelleAutor Tiep Phan

  2. 4

    Verwenden routerLink auf Ihre a tag für die übergabe per url.

    [routerLink]="['yourRouteHere', {'paramKey': paramValue}]

    Zu bekommen, müssen Sie es verwenden ActivatedRoute service. Injizieren Sie in Ihre Komponenten und verwenden Sie die subscribe-Methode. Hier meine route ist die injiziert service

    this.route.params.subscribe(params => {
   const id = Number.parseInt(params['paramKey']);
}

    Wenn Sie möchten, um Parameter aus der route verwenden .params, sonst, wenn Sie wollen, aus query-string, verwenden Sie .queryParams

    danke, aber Es gibt mir Fehler.
    aber was [routerLink]="['yourRouteHere', {'paramKey': {'key':'value'}}]
    fügen Sie die doppelte Hochkomma[routerLink]="['yourRouteHere', {'paramKey': paramValue}]"

    InformationsquelleAutor Suren Srapyan

  3. 0
    1. Angenommen deine url ist http://mit.edu/dashboard und das gewünschte Ergebnis ist
      http://mit.edu/dashboard/user?id=1 dann folgenden code verwenden,
    <a [routerLink]="['user']" [queryParams]="{id: 1}" </a>
    1. Angenommen deine url ist http://mit.edu/dashboard und Ihre gewünschte Ergebnis ist http://mit.edu/user?id=1 dann folgenden code verwenden, ["der Unterschied ist /Dashobard" fehlt hier aus dem url]
    <a [routerLink]="['/user']" [queryParams]="{id: 1}" </a>

    InformationsquelleAutor sparsh turkane

Schreibe einen Kommentar