이번에는 Angular5 라우팅 을 사용하여 값을 전달하는 방법과 Angular5 라우팅을 사용하여 값을 전달할 때 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다. 살펴보겠습니다.
현재 Angular는 안정 버전인 Angular5로 업그레이드되었습니다. 이번 업그레이드는 Angular의 핵심 부분이자 심지어 단일 페이지 애플리케이션의 가장 큰 단점이라고 할 수 있습니다! 중첩 라우팅은 Angular에서 이 문제를 해결할 수 없다는 것입니다! Angular의 라우팅은 영웅 목록을 영웅 세부정보로 이동하는 것이기도 합니다. 라우팅 매개변수가 작동합니다! 라우팅 수신 매개변수를 통해 해당 영웅의 세부정보를 식별하세요. 이제 경로 값 전달을 자세히 설명하겠습니다. 첫 번째 방법은 공식 웹사이트로 이동하여 단일 값 ID를 전달하는 것입니다. 다른 하나는 여러 데이터를 전달하는 것입니다!
1. 단일 값 전달
['/hero', hero.id]
<ul class="items"> <li *ngFor="let hero of heroes$ | async" [class.selected]="hero.id === selectedId"> <a [routerLink]="['/hero', hero.id]"> <span class="badge">{{ hero.id }}</span>{{ hero.name }} </a> </li> </ul>
위는 공식 웹사이트의 예입니다
제 예를 들어 소개하겠습니다.
첫 번째는 목록입니다. 페이지 및 점프 방법
코드를 복사합니다코드는 다음과 같습니다.
그런 다음 라우팅을 구성합니다. (단일 값을 전달하는 방법은 세부 구성 요소 라우팅에서 구성해야 합니다.)
{ path:'listDetail/:id', component:ListDetailComponent },
전달한 후 매개변수를 얻습니다. 세부 컴포넌트
ngOnInit() { this.route.params .subscribe((params: Params) => { this.id = params['id']; console.log(this.id); console.log('传值'); console.log(params) }) }
2의 ngOnInitlife Cycle에서 매개변수를 얻습니다. 일반적인 복잡한 비즈니스 시나리오에서는 여러 데이터를 전송해야 하는데 이때 무엇을 사용해야 합니까? queryParams
코드 복사코드는 다음과 같습니다.
{{data.name}}
여기 데이터는 제가 직접 가져온 것입니다. 데이터를 정리하고 그 위에 매개변수를 넣어 HTML을 단순화할 수도 있습니다. 이제 질문이 있습니다. /:id/:id??? 이 매개변수는 내 것입니다. 실제로 이 방법은 필요하지 않습니다. 라우팅 구성!
ngOnInit() { this.route.queryParams .subscribe((params: Params) => { this.id = params['id']; this.state = params['state']; console.log(params) console.log(this.id); console.log(this.state); }) }
이 글의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP에 주목하세요. 중국 웹사이트에 있습니다!
추천 도서:
JS를 조작하여 간단한 접기 및 펼치기 애니메이션을 구현하는 방법JS를 조작하여 투명도 그라데이션 애니메이션을 구현하는 방법위 내용은 Angular5 라우팅을 사용하여 값을 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!