web-dev-qa-db-ja.com

Angular2で複数のルートパラメーターを渡す

複数のルートパラメータを渡すことは可能ですか？以下のように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"}]);
     }
}
angularangular2-routing
55
user3869623

OKは間違いを認識しました../: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"}]);
    }
}
54
user3869623

この answer で詳述されているように、mayurとuser3869623の回答は、廃止されたルーターに関連しています。次のように、複数のパラメーターを渡すことができます。

ルーターを呼び出すには：

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

Routes.tsで：

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

Angularで複数のルートパラメータを渡す2つの方法

方法1

App.module.tsで

コンポーネント2としてパスを設定します。

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

複数のパラメーターid1とid2を使用してルーターを呼び出してMyComp2にnaviagteします。

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

方法-2

App.module.tsで

コンポーネント2としてパスを設定します。

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

複数のパラメーターid1とid2を使用してルーターを呼び出してMyComp2にnaviagteします。

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