Передача декількох параметрів маршруту в Angular2

77

Чи можна передати кілька параметрів маршруту, наприклад, як показано нижче, потрібно передати id1і id2доcomponent 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

— користувач3869623
джерело

79

ОК зрозумів помилку .. вона повинна бути /:id/:id2

У будь-якому випадку цього не знайшов у жодному навчальному посібнику чи іншому запитанні StackOverflow.

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

— користувач3869623
джерело

ось підручник для того ж див. У розділі маршрутизації angular.io/docs/ts/latest/cheatsheet.html

— Джейн

1

Лот змінився з часу публікації відповіді .. З якою версією angular2 ви працюєте? у збірці випуску ng2.0.0: `const myRoutes: Routes = [{шлях: 'compBPath /: id1 /: id2', компонент: MyCompB}]; експортувати const myRouting: ModuleWithProviders = RouterModule.forChild (myRoutes); `А у вашому NgModule` @NgModule ({import: [myRouting], декларації: [MyCompB],}) клас експорту MyModule {} клас експорту MyCompA {onClick () {this._router.navigate (['compBPath', "val1 "," val2 "]); }} `

— user3869623

1

Я також погоджуюсь з @ user3869623, оскільки this._router.navigate (['MyCompB', {id: "someId", id2: "another ID"}]); позначає, що 'id' та 'id2' є необов'язковими параметрами маршруту, коли в @RouteConfig ([{шлях: '/ компонент /: id /: id2', ім'я: 'MyCompB', компонент: MyCompB}]): id /: id2 - обов’язкові параметри маршруту, хоча вони динамічні. оскільки необов’язкові параметри маршруту не потрібно оголошувати в RouterConfig.

— Naeem Mushtaq

58

Як детально викладено у цій відповіді , відповіді mayur та user3869623 тепер стосуються застарілого маршрутизатора. Тепер ви можете передавати кілька параметрів наступним чином:

Щоб зателефонувати маршрутизатору:

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

У маршрутах.ts:

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

— trees_are_great
джерело

8

Для тих, хто хоче знати, також можна додати між цими змінними ідентифікатора якийсь інший термін, що допомагає створити більш зручну для користувача URL-адресу. Приклад: this.router.navigate (['/ mypath', "firstId", "secondPath", "secondID"]), що дозволяє використовувати 'myPath / 4 / secondPath / 5'

— Eamon Bohan

Чи можливо це також при використанні маршрутизатора в шаблоні? Я не міг знайти рішення для цього.

— julien-100000

1

@ julien-100000 - Так, так, коментуйте так: [nsRouterLink] = "['/ myUrlPath', 'someId', 'another ID']"

— trees_are_great

3

@EamonBohan Ти врятував мій цілий день розслідування, ти справжній MVP, спасибі людино !!!

— Ovi Trif

10

Два методи передачі кількох параметрів маршруту в Angular

Метод-1

У app.module.ts

Встановити шлях як компонент2.

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

Викличте маршрутизатор, щоб перейти до MyComp2 з декількома параметрами id1 та id2.

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

Метод-2

У app.module.ts

Встановити шлях як компонент2.

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

Викличте маршрутизатор, щоб перейти до MyComp2 з декількома параметрами id1 та id2.

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

— ПІДВОДНОЕ АНЧУКАНДАН
джерело

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"}]);
          }
        }

— майюр
джерело