IT TIP

Angular2에서 여러 경로 매개 변수 전달

itqueen 2020. 12. 11. 21:08
반응형

Angular2에서 여러 경로 매개 변수 전달


그것은 PARAMS 예를 전달해야 아래와 같은 여러 경로를 통과하는 것이 가능 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"}]);
     }
}

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

답변 에서 자세히 설명 했듯이 mayur & user3869623의 답변은 이제 더 이상 사용되지 않는 라우터와 관련이 있습니다. 이제 다음과 같이 여러 매개 변수를 전달할 수 있습니다.

라우터를 호출하려면 :

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

route.ts에서 :

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

Angular에서 다중 경로 매개 변수를 전달하는 두 가지 방법

방법 -1

app.module.ts에서

경로를 component2로 설정하십시오.

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

여러 매개 변수 id1 및 id2를 사용하여 라우터를 호출하여 MyComp2로 이동합니다.

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

방법 -2

app.module.ts에서

경로를 component2로 설정하십시오.

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

여러 매개 변수 id1 및 id2를 사용하여 라우터를 호출하여 MyComp2로 이동합니다.

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

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

참고 URL : https://stackoverflow.com/questions/36320821/passing-multiple-route-params-in-angular2

반응형