Angular 18 시리즈 (21) 라우터 라우팅 변경 이벤트

작은 쓰레기 같은 놈들 · 게시됨 2024. 8. 5. 오후 2:11:09

요구사항: Angular Route 경로 변경 사항을 감지하고, 내비게이션 바의 메뉴를 토글하며, 경로가 로드될 때 Title을 주입하여 웹페이지 제목을 동적으로 수정합니다.

이를 위해 간단한 앱 컴포넌트를 만들고 그 라우터를 생성자에 주입합니다:

로그인이 보이네요.

이러한 RouterEvents는 다음과 같은 라우터 관련 이벤트의 기본 클래스(알파벳 순서) 역할을 합니다:

경비병 체크엔드
경비병 체크 시작
내비게이션 취소
내비게이션엔드(NavigationEnd)
내비게이션에러
탐색 건너뛰었습니다
내비게이션 시작
결의 끝
결의 시작
노선: 인정

참조:하이퍼링크 로그인이 보입니다.

위의 카테고리 목록은 라우터가 출력할 수 있는 잠재적 결과입니다. 예를 들어, 사용자가 새로운 뷰로 탐색을 시작하면 NavigationStart와 NavigationEnd 이벤트가 호출됩니다.

이 정보(및 그 이상)를 얻으시려면 다음 코드로 router.events 이벤트에 구독하실 수 있습니다:

로그인이 보이네요.

이벤트를 조건으로 필터링하라면, 코드는 다음과 같습니다:

로그인이 보이네요.

예를 들어 NavigationEnd처럼 하나의 이벤트만 원한다면, Filter()를 통해 RxJS에서 관측 가능 값을 가져오고 전송하여 특정 이벤트에만 방출되도록 할 수 있습니다:

로그인이 보이네요.

페이지 제목 코드 수정:

로그인이 보이네요.

경로를 바꾸기 위해 메뉴를 클릭하면 렌더링이 다음과 같습니다:

(끝)

[각] Angular 18 시리즈 (21) 라우터 라우팅 변경 이벤트

관련 게시물

본 섹션