>웹 프론트엔드 >JS 튜토리얼 >Angular5 라우팅 매개변수를 작동하는 방법

Angular5 라우팅 매개변수를 작동하는 방법

php中世界最好的语言
php中世界最好的语言원래의
2018-06-01 14:46:321366검색

이번에는 Angular5라우팅전달 매개변수를 작동하는 방법과 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 코드의 첫 번째 Routelink는

또한 라우팅을 구성해야 합니다

{
 path:'listDetail/:id',
 component:ListDetailComponent
 }
읽어보신 후 메소드를 마스터하신 것 같습니다. 이 기사의 사례에 대해 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트를 주목하세요.

추천 도서:

JS를 작동하여 투명도 그라디언트 애니메이션을 구현하는 방법

jQuery를 사용하는 방법 XML 노드 및 속성 탐색

🎜

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.