Angular5 라우팅 매개변수 사용에 대한 자세한 설명

이번에는 Angular5routing매개변수 사용에 대해 자세히 설명하고, Angular5 라우팅 사용 시 주의사항

은 무엇인지 살펴보겠습니다.

1. 물음표 뒤의 매개변수, 매개변수를 얻는 방법: ActivatedRoute.queryParams[id]

예: /product?id=1&name=iphone 또는 다음과 같을 수 있습니다: [ routerLink]= "[ '/books'] " [ queryParams] = " {bookname:' 《 《生》'}

코드: html

<h4>Messages</h4>
<p>Total:{{msgs.total}}</p>
<p *ngFor="let item of msgs.data">
 <b>{{item.name}}</b>:
 <a [routerLink]="[&#39;/next&#39;,item.id]" [queryParams]="{id:item.id, msg:item.msg, name:item.name}">{{item.msg}}</a>
 <a routerLink="/final">Reply</a><p></p>
</p>

Get 매개변수 js

ngOnInit() {
 let obj = this.route.queryParams["_value"];
 console.log(obj);
}

2. 콜론 형식,

예: 경로:/ product/:id

Get Parameter 메소드: ActivatedRoute.params[id]

위 html 코드의 첫 번째 라우트링크는

또한 라우트

{
 path:'listDetail/:id',
 component:ListDetailComponent
 }

를 구성해야 합니다. jb51.net/article/139125.htm

3 .js

의 경로 점프예: path:/product,comComponent:ProductComponent,data:[{madeInChina:true}]}

매개변수 가져오기 방법: ActivatedRoute. snapshot.data[0][madeInChina]

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요.

추천 도서:

JS는 투명도 그라디언트 기능을 구현합니다

vue에서 .vue를 사용하는 단계에 대한 자세한 설명

🎜

위 내용은 Angular5 라우팅 매개변수 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!