각도+라우터링크 점프 방법 요약

이번에는 앵귤러+라우터링크 점프 방식에 대한 정리를 가져오겠습니다. 앵귤러+라우터링크 점프 방식에 요약된 주의사항은 무엇인가요?

머리말

라우터의 Navigate() 메서드를 사용하여 routing을 전환하는 것 외에도 Angular2는 DOM 개체를 라우팅 항목으로 향상시키는 지시어도 제공합니다.

@View({
directives:[RouterOutlet,RouterLink]
template : `<nav>
<b router-link="video">video</b> | 
<b router-link="music">music</b>
</nav>
<router-outlet></router-outlet>`
})

RouterLink 지시어는 호스트 DOM입니다. object click event 모니터링을 추가하고, 트리거 시 라우팅을 위해 Router의 Navigate() 메소드를 호출합니다.

그러나 이 글은 주로 Angular의 RouterLink fancy jump에 대한 관련 내용을 소개합니다. 모든 사람의 참고와 학습을 위해 공유됩니다. 아래에서는 자세한 소개를 살펴보겠습니다.

routerLink 자체는 두 가지 쓰기 방법을 지원합니다.

<a routerLink="detail">
</a>
<a [routerLink]="[&#39;detail&#39;]">
</a>

routerLink의 값에 대한 쓰기 방법은 무엇이며, 차이점은 무엇인가요?

현재 경로가

`http://localhost:4200/#/doc/license`

라고 가정 작성 방법 1: 절대 경로 / + 경로 이름

 <!--跳到 http://localhost:4200/#/doc/license -->
 <a [routerLink]="[&#39;/doc/demo&#39;]" >跳呀跳</a>
 
 <!--跳到 http://localhost:4200/#/demo -->
 <a [routerLink]="[&#39;/demo&#39;]" >跳呀跳</a>

그러면 URL은

http://localhost:4200/#/doc/demo이고 점프합니다. 즉, http:// localhost:4200/#/ + 이동하려는 절대 경로입니다.

작성2: 루트명 루트명

 <a [routerLink]="[&#39;demo&#39;]" >跳呀跳</a>

그러면 url은 http://localhost:4200/#/doc/license/(demo) 즉, http://localhost:4200/#/ 입니다. doc/license + 점프하려는 절대 경로입니다. 이때 경로에 무언가를 추가하고 점프하지 않는 /(demo)로 변경합니다.

작성방법 3: 상대경로../경로명

 <a [routerLink]="[&#39;../demo&#39;]" >跳呀跳</a>

그러면 url은

http://localhost:4200/#/doc/demo 즉, http://localhost:4200/#입니다. /doc + you 이동할 상대 경로입니다. 이전 레벨을 살펴보기 시작합니다.

작성 방법 4: ./route 이름, 즉 현재 경로 + 점프하기 위해 작성한 경로

 <a [routerLink]="[&#39;./demo&#39;]" >跳呀跳</a>

그러면 URL은

http://localhost:4200/#/doc/license/ 데모, 이는 http://localhost:4200/#/doc/license + 이동하려는 상대 경로입니다. 일치하는 경로를 검색하고 현재 경로의 다음 레벨에서 점프합니다.

| 더 많은 API 사용법이 github에 업데이트되었습니다

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

추천 자료:

요소 콘텐츠가 존재하는지 확인하는 jquery

Nodejs+Electron 우분투 설치 단계에 대한 자세한 설명

위 내용은 각도+라우터링크 점프 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!