ในฐานะนักพัฒนาส่วนหน้า คุณเจอสถานการณ์ที่คุณต้องแสดงส่วนประกอบเฉพาะเมื่อคุณนำทางไปยังแดชบอร์ด หรือส่วนประกอบการเข้าสู่ระบบของคุณ สำหรับส่วนที่เหลือ คุณต้องซ่อน

คุณจะจัดการทั้งหมดนี้ในเชิงมุมได้อย่างไร??

Well Angular ให้เหตุการณ์และคุณสมบัติต่างๆ ของเราเตอร์แก่คุณ ซึ่งคุณสามารถใช้เพื่อติดตามว่าผู้ใช้เราเตอร์รายใดอยู่ในขณะนี้

เราจะพูดถึงเหตุการณ์ NavigationEnd ของเส้นทางเชิงมุม

การสิ้นสุดการนำทางคืออะไร??

เหตุการณ์ที่ทริกเกอร์เมื่อการนำทางสิ้นสุดลงสำเร็จ

วิธีใช้??

• ตัวสร้างภายในคุณสมัครรับข้อมูลเหตุการณ์เราเตอร์
• จากนั้นคุณจะตรวจสอบว่า val ที่สมัครไว้เป็นตัวอย่างของ Navigation End หรือไม่
• ถ้าใช่ คุณจะใช้ค่าที่สมัครไว้และใช้ value.url เพื่อค้นหา url ที่ผู้ใช้สำรวจอยู่ในปัจจุบันและใส่ตรรกะเข้าไปข้างใน
• ในที่สุด คุณจะเขียนตรรกะของคุณตามค่า.url

app.component.html ของฉันมีลักษณะดังนี้

ที่นี่คุณจะเห็นว่าฉันกำลังแสดงส่วนหัวก็ต่อเมื่อคุณสมบัติ "showHeader" เป็นจริง

app.component.ts ของฉันมีลักษณะดังนี้

ตอนนี้ ถ้าฉันคลิกที่ปุ่มส่ง มันจะกำหนดเส้นทางไปที่ 'แดชบอร์ด'
และแสดงส่วนประกอบของแดชบอร์ด

* ดังนั้นส่วนประกอบส่วนหัวจึงมองเห็นได้ *

พื้นที่เก็บข้อมูลการทำงานสำหรับการอ้างอิง
https://stackblitz.com/edit/angular-ivy-atods7?file=src/app/app.component.ts

ลิงก์ Github
https://github.com/deepa314/angular-ivy-atods7.git

ฉันหวังว่ามันจะช่วยพวกคุณได้ :)
ถ้าคุณชอบโปรดกดไลค์ แชร์ และสมัครรับข้อมูล