반응형
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
반응형
'IT TIP' 카테고리의 다른 글
Dockerfile에서 chown이 작동하지 않는 이유는 무엇입니까? (0) | 2020.12.11 |
---|---|
Ubuntu Docker 이미지 내에서 wget을 실행하는 방법은 무엇입니까? (0) | 2020.12.11 |
Excel에서 셀을 보호하지만 VBA 스크립트로 수정 가능 (0) | 2020.12.11 |
디버그 에이전트 없이는 NullPointerException 스택 추적을 사용할 수 없습니다. (0) | 2020.12.11 |
무료 DTD에서 XSD 로의 변환 유틸리티? (0) | 2020.12.11 |