web-dev-qa-db-fra.com

Passage de paramètres de route multiples dans Angular2

Est-il possible de transmettre plusieurs paramètres de route, par exemple comme ci-dessous, il faut passer id1 et id2 au component B

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

OK a réalisé une erreur .. ça doit être /:id/:id2

Quoi qu'il en soit, cela n'a été trouvé dans aucun tutoriel ou autre question StackOverflow.

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

Comme détaillé dans ce réponse , les réponses de mayur & user3869623 se rapportent maintenant à un routeur obsolète. Vous pouvez maintenant transmettre plusieurs paramètres comme suit:

Pour appeler un routeur:

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

Dans routes.ts:

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

Deux méthodes pour passer plusieurs paramètres de route en angulaire

Méthode 1

Dans app.module.ts

Définir le chemin comme composant2.

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

Appelez le routeur naviagte vers MyComp2 avec plusieurs paramètres id1 et id2.

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

Méthode 2

Dans app.module.ts

Définir le chemin comme composant2.

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

Appelez le routeur naviagte vers MyComp2 avec plusieurs paramètres id1 et id2.

export class MyComp1 {
onClick(){
    this._router.navigate( ['component2', {id1: "id1 Value", id2: 
    "id2  Value"}]);
 }
}
3
SUBAIR ANCHUKANDAN
      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"}]);
          }
        }
2
mayur