각도 경로 강조 구현 단계에 대한 자세한 설명

이번에는 앵귤러라우팅하이라이트 구현 단계에 대해 자세히 설명하겠습니다. 앵귤러 라우팅 하이라이팅 구현 시 주의사항은 무엇인가요?

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

백엔드 관리 시스템 작업을 할 때 왼쪽에 일련의 경로가 있습니다. 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는 경로가 완전히 일치할 때 강조 표시됩니다(예:

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

07670bc53af621bc81edb27698233e27login5db79b134e9f6b82c0b36e0489ee08ed

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

<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive">
 login {{ rla.isActive ? &#39;激活&#39; : &#39;未激活&#39;}}
</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이 사용자인 경우 두 경로가 모두 일치되고 빨간색 스타일이 추가됩니다.

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

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

추천 자료:

Angular5 라우팅 값 전송 방법 요약

JS에서 접기 및 펼치기 애니메이션 만들기(코드 포함)

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