Routing variable in Angular2

Gelesen habe ich über die Dokumentation für die neue Eckige router. Beispiel Sie haben für das routing an eine variable ist:

Komponente/Modul:

angular.module('myApp', ['ngFuturisticRouter'])
.controller('AppController', ['$router', function($router) {
  $router.config({ path: '/user/:id' component: 'user' });
  this.user = { name: 'Brian', id: 123 };
});

HTML/Vorlage:

<div ng-controller="AppController as app">
  <a router-link="user({id: app.user.id})">{{app.user.name}}</a>
</div>

Hier ist meine Komponente:

@RouteConfig([
  { path: '/', component: Home, as: 'home' },
  { path: '/displays/:id', component: DisplayDetails, as: 'display-details' }
])

Und meine HTML/Vorlage:

<div class="col-md-3" *ng-for="#display of displays">
    <a [router-link]="['/display-details({id: display.id})']"><display-card ></display-card></a>
</div>

Ich habe auch versucht, anstatt der Komponente alias (display-details) ich habe versucht, indem Sie den tatsächlichen Pfad und die Komponente selbst, aber Sie alle geben mir den gleichen Fehler:

EXCEPTION: Component "App" has no route named "display-details({id: display.id})". in [null]
Versuchen Sie, mit [router-link]="['/display-details', {id: display.id}]", btw, welche version verwenden Sie?
Danke Mann! Ich bin mit der alpha.37. BTW, du hast mir wirklich geholfen mit Angular2 ich denke du hast alle Fragen beantwortet, die ich hatte
Sie wollen, machen Sie es eine Antwort, so kann ich ein Häkchen geben

InformationsquelleAutor ThreeAccents | 2015-10-06

  1. 8

    Vorgeschlagen von @ThreeAccents

    Zitat aus der Dokumentation RouterLink.

    RouterLink erwartet, dass der Wert ein array von Weg-Namen, gefolgt von den params für das level des routing. Zum Beispiel ['/Team', {teamId: 1}, 'User', {userId: 2}] bedeutet, dass wir wollen, generieren Sie einen link für die Team route mit params {teamId: 1}, und mit einem Kind-route Benutzer mit params {userId: 2}.

    Also die Lösung ist die änderung der routerLink wie folgt :

    <div class="col-md-3" *ng-for="#display of displays">
    <a [routerLink]="['/display-details', {id: display.id}]">
       <display-card ></display-card>
    </a>
</div>

    Froh, dass es bei dir funktioniert hat 🙂

    Ich aktualisiert Ihre Antworten zu reflektieren, die im API als der 2.0-beta. Ich denke es fehlen noch 2 Dinge. Der link /display-details sollte /DisplayDetails und die route 'als' parameter geändert wurde, auf 'name'.

    InformationsquelleAutor Eric Martinez

  2. 8

    Diese syntax funktioniert in meinem Fall: 

    <div class="col-md-3" *ng-for="#display of displays">
    <a [routerLink]="['/display-details', display.id]">
       <display-card ></display-card>
    </a>
</div>

    mit diesem router config: 

    @RouteConfig([
  { path: '/', component: Home, as: 'home' },
  { path: '/display-details/:id', component: DisplayDetails }
])

    InformationsquelleAutor Phil

  3. 3

    Für den Pfad: '/Nutzer/:id'

    Wir können auf zwei Art und Weise, wie /Benutzer;id:1234 oder /Benutzer/123

    //For /user;id:1234
[routerLink]="['/user', {id: display.id}]"
//For /user/1234
[routerLink]="['/user', display.id]"

    Kam ich hier für mein Problem mit dem Pfad: '/Kunden/:id/detail " und endlich fertig mit:

    [routerLink]="['/customers', cust.id, 'detail']"

    InformationsquelleAutor Ali Adravi

  4. 0

    Können Sie eine Funktion verwenden, die in Ihrer Komponente, um die dynamische URL und Parameter mithilfe routerLink und queryParams Richtlinie.

    <div class="col-md-3" *ng-for="#display of displays">
    <a [routerLink]="getURL(display)" 
       [queryParams]="getParams(display)>
       <display-card ></display-card>
    </a>
</div>

    in-Komponente: 

    getURL(display) { 
    return ['/displays', display.id];
}

getParams(display) { 
    return { param: display.somethingElse }; 
}

    InformationsquelleAutor xiaoke

Schreibe einen Kommentar