각도+RouterLinkActive가 경로 강조 기능을 구현하는 방법에 대한 자세한 설명

이번에는 Angle+RouterLinkActive에서 구현한 라우팅 하이라이팅 기능에 대해 자세히 설명드리겠습니다. 라우팅 하이라이팅을 구현한 Angle+RouterLinkActive의 주의사항은 무엇인가요?

경로 강조란 무엇인가요? 이점은 무엇입니까?

백엔드 관리 시스템 작업을 할 때 왼쪽에 일련의 경로가 있습니다.

Navigation. 그러면 다른 페이지를 입력하려면 클릭하세요. 그런 다음 이 경로가 있는 DOM 요소에 현재 위치를 나타내는 스타일이 추가됩니다. .

근데 새로고침하면 이런 스타일이 없어져요...

어떡하지?

경로 강조 표시 채택: 경로가 활성화되면 경로를 추가하는 DOM 요소에 클래스를 추가할 수 있습니다. 이 스타일은 URL이 변경될 때만 제거됩니다.

현재 경로가 활성화되었거나 현재 경로가 활성화된 상태입니다. 이는 페이지 URL의 경로와 현재 DOM 태그의 경로가 일치하려고 함을 의미합니다.

// 用法概览
@Directive({
  selector: '[routerLinkActive]',
  exportAs: 'routerLinkActive'
})
class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit {
 constructor(router: Router, element: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef)
 links: QueryList<RouterLink>
 linksWithHrefs: QueryList<RouterLinkWithHref>
 get isActive: boolean
 routerLinkActiveOptions: {...}
 set routerLinkActive: string[] | string
 ngAfterContentInit(): void
 ngOnChanges(changes: SimpleChanges): void
 ngOnDestroy(): void
}

예

.red{
  color: red;
}

<a routerLink="/user/login" routerLinkActive="red">login</a>

url이 user 또는 /user/login인 경우 a 태그에 classred가 추가됩니다. URL이 다른 것으로 변경되면 클래스가 제거됩니다.

두 개의 클래스를 추가하는 방법은 무엇입니까?

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>

routerLinkActive에는

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>
login

에 대한 매개변수를 구성할 수도 있습니다.

routerLinkActive

패스정확도: true는 경로가 완전히 일치할 때 강조 표시됩니다(예:

코드 복사). 코드는 다음과 같습니다.

login

isActive를 사용하여 경로가 현재 활성 상태인지 확인할 수도 있습니다

<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive">
 login {{ rla.isActive ? '激活' : '未激活'}}
</a>

현재 경로가 활성화되어 있으면 로그인 활성화됨

비활성 상태

로그인 비활성화됨

위의 rla는 routerLinkActive의 약어로 임의로 정의할 수 있습니다.

중요한 점은 다음과 같습니다. routerLink 요소를 사용하는 상위 요소에서 RouterLinkActive 지시문을 사용할 수 있습니다.

각 경로에 별도로 스타일을 추가하는 것이 번거롭나요? 상위 요소에 경로 강조 명령을 추가하면 문제를 해결할 수 있습니다!

<p routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">
 <a routerLink="/user/login">login</a>
 <a routerLink="/user/reset">reset</a>
</p>

a 태그의 상위 요소 p에 routerLinkActive 및 routerLinkActiveOptions를 추가하면 됩니다. 경로가 /user/login 또는 /user/reset인 경우 해당 경로가 위치한 dom 요소에 빨간색 스타일이 추가됩니다. 여기서 주목해야 할 것은 완전한 일치를 지정하기 위해 routerLinkActiveOptions를 추가하는 것입니다. 그렇지 않으면 URL이 사용자인 경우 두 경로가 모두 일치되고 빨간색 스타일이 추가됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Vue를 사용하여 PopupWindow 구성 요소를 구현하는 방법

jQuery를 작동하여 전자 시계 효과를 얻는 방법

위 내용은 각도+RouterLinkActive가 경로 강조 기능을 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!