Angular5 라우팅을 사용하여 값을 전달하는 방법

이번에는 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]="[&#39;/hero&#39;, 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!