Với tư cách là nhà phát triển Frontend, Bạn gặp tình huống phải hiển thị một thành phần chỉ khi bạn điều hướng đến bảng điều khiển hoặc thành phần đăng nhập của mình. Đối với phần còn lại, bạn phải ẩn.

Làm thế nào bạn sẽ quản lý tất cả những điều này trong góc cạnh??

Well Angular cung cấp cho bạn nhiều sự kiện và thuộc tính khác nhau của bộ định tuyến mà bạn có thể sử dụng để theo dõi xem người dùng bộ định tuyến hiện đang ở đâu.

Chúng ta sẽ thảo luận về sự kiện NavigationEnd của tuyến đường Angular

Kết thúc điều hướng là gì??

Một sự kiện được kích hoạt khi điều hướng kết thúc thành công.

Làm thế nào để sử dụng??

• Bên trong hàm tạo, bạn đăng ký các sự kiện của bộ định tuyến.
• Sau đó, bạn sẽ kiểm tra xem val đã đăng ký có phải là phiên bản của Kết thúc điều hướng hay không.
• Nếu có thì bạn sẽ sử dụng giá trị đã đăng ký đó và sử dụng value.url để tìm url nơi người dùng hiện đang điều hướng và đặt logic vào bên trong.
• Cuối cùng, bạn sẽ viết logic của mình theo value.url

app.component.html của tôi trông như thế này

Ở đây bạn có thể thấy tôi chỉ hiển thị tiêu đề nếu thuộc tính “showHeader” là đúng

app.component.ts của tôi trông như thế này

Bây giờ, nếu tôi nhấp vào nút gửi, nó sẽ chuyển đến 'bảng điều khiển'
và hiển thị thành phần bảng điều khiển.

* Do đó, thành phần tiêu đề sẽ hiển thị *

Kho lưu trữ làm việc để tham khảo
https://stackblitz.com/edit/angular-ivy-atods7?file=src/app/app.component.ts

Liên kết Github
https://github.com/deepa314/angular-ivy-atods7.git

Tôi hy vọng nó sẽ giúp ích cho các bạn :)
Nếu bạn thích hãy thích, chia sẻ và đăng ký