집 >웹 프론트엔드 >JS 튜토리얼 >Angular+RouterLink는 다양한 멋진 점프를 만듭니다.

Angular+RouterLink는 다양한 멋진 점프를 만듭니다.

php中世界最好的语言원래의: 2018-06-01 11:36:551395검색

이번에는 색다른 점프를 만들기 위한 Angular+RouterLink를 소개하겠습니다. Angular+RouterLink에서 멋진 점프를 하기 위한 주의사항은 무엇인가요? 아래에서 실제 사례를 살펴보겠습니다.

머리말

라우터를 전환하기 위해 Router의 Navigate() 메서드를 사용하는 것 외에도 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 EventMonitoring이 트리거되면 라우팅을 위해 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: ./경로 이름, 즉 현재 경로 + 점프하기 위해 작성한 경로

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!