>  기사  >  웹 프론트엔드  >  Angular5 라우팅을 사용하여 값을 전달하는 방법

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

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

이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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