Übergeben mehrerer Routenparameter in Angular2

75

Ist es möglich, mehrere Routenparameter zu übergeben, zB wie unten müssen id1und id2an die übergeben werdencomponent B

@RouteConfig([
    {path: '/component/:id :id2',name: 'MyCompB', component:MyCompB }
])
export class MyCompA {
  onClick(){
    this._router.navigate( ['MyCompB', {id: "someId", id2: "another ID"}]);
     }
}

angular angular2-routing

— user3869623
quelle

77

OK hat einen Fehler erkannt .. es muss sein /:id/:id2

Jedenfalls wurde dies in keinem Tutorial oder einer anderen StackOverflow-Frage gefunden.

@RouteConfig([{path: '/component/:id/:id2',name: 'MyCompB', component:MyCompB}])
export class MyCompA {
    onClick(){
        this._router.navigate( ['MyCompB', {id: "someId", id2: "another ID"}]);
    }
}

— user3869623
quelle

Hier ist ein Tutorial für das gleiche siehe Im Routing-Abschnitt angle.io/docs/ts/latest/cheatsheet.html

— Pardeep Jain

1

Lot hat sich geändert, seit die Antwort veröffentlicht wurde. Mit welcher Version von angle2 arbeiten Sie? im Build der Version ng2.0.0: `const myRoutes: Routes = [{Pfad: 'compBPath /: id1 /: id2', Komponente: MyCompB}]; export const myRouting: ModuleWithProviders = RouterModule.forChild (myRoutes); `Und in Ihrem NgModule` @NgModule ({imports: [myRouting], Deklarationen: [MyCompB],}) Exportklasse MyModule {} Exportklasse MyCompA {onClick () {this._router.navigate (['compBPath', "val1 "," val2 "]); }} `

— user3869623

1

Ich stimme auch @ user3869623 als this._router.navigate zu (['MyCompB', {id: "someId", id2: "another ID"}]); bedeutet, dass 'id' und 'id2' optionale Routenparameter in der @RouteConfig sind ([{Pfad: '/ component /: id /: id2', Name: 'MyCompB', Komponente: MyCompB}]): id /: id2 sind erforderliche Routenparameter, obwohl sie dynamisch sind. Optionale Routenparameter müssen nicht in der RouterConfig deklariert werden.

— Naeem Mushtaq

58

Wie in dieser Antwort beschrieben , beziehen sich die Antworten von mayur & user3869623 jetzt auf einen veralteten Router. Sie können jetzt mehrere Parameter wie folgt übergeben:

So rufen Sie den Router an:

this.router.navigate(['/myUrlPath', "someId", "another ID"]);

In route.ts:

{ path: 'myUrlpath/:id1/:id2', component: componentToGoTo},

— Bäume_sind_groß
quelle

7

Für alle, die es wissen möchten, ist es auch möglich, zwischen diesen ID-Variablen einen anderen Begriff einzufügen, um eine benutzerfreundlichere URL zu erstellen. Beispiel: this.router.navigate (['/ mypath', "firstId", "secondPath", "secondID"]), das 'myPath / 4 / secondPath / 5' zulässt

— Eamon Bohan

Ist das auch möglich, wenn der Routerlink in der Vorlage verwendet wird? Ich konnte keine Lösung dafür finden.

— Julien-100000

1

@ julien-100000 - Ja, kommentieren Sie wie folgt: [nsRouterLink] = "['/ myUrlPath', 'someId', 'eine andere ID']"

— tree_are_great

3

@EamonBohan Du hast meinen ganzen Untersuchungstag gerettet, du bist ein echter MVP, danke Mann !!!

— Ovi Trif

10

Zwei Methoden zum Übergeben mehrerer Routenparameter in Angular

Methode 1

In app.module.ts

Pfad als Komponente festlegen2.

imports: [
 RouterModule.forRoot(
 [ {path: 'component2/:id1/:id2', component: MyComp2}])
]

Rufen Sie den Router auf, um MyComp2 mit mehreren Parametern id1 und id2 zu navigieren.

export class MyComp1 {
onClick(){
    this._router.navigate( ['component2', "id1","id2"]);
 }
}

Methode 2

In app.module.ts

Pfad als Komponente festlegen2.

imports: [
 RouterModule.forRoot(
 [ {path: 'component2', component: MyComp2}])
]

Rufen Sie den Router auf, um MyComp2 mit mehreren Parametern id1 und id2 zu navigieren.

export class MyComp1 {
onClick(){
    this._router.navigate( ['component2', {id1: "id1 Value", id2: 
    "id2  Value"}]);
 }
}

— SUBAIR ANCHUKANDAN
quelle

2

      new AsyncRoute({path: '/demo/:demoKey1/:demoKey2', loader: () => {
      return System.import('app/modules/demo/demo').then(m =>m.demoComponent);
       }, name: 'demoPage'}),
       export class demoComponent {
       onClick(){
            this._router.navigate( ['/demoPage', {demoKey1: "123", demoKey2: "234"}]);
          }
        }

— Mayur
quelle