Als Frontend-Entwickler stoßen Sie auf eine Situation, in der Sie eine Komponente nur anzeigen müssen, wenn Sie zum Dashboard oder zu Ihrer Anmeldekomponente navigieren. Für den Rest müssen Sie sie ausblenden.

Wie willst du das alles in eckig handhaben??

Nun, Angular bietet Ihnen verschiedene Ereignisse und Eigenschaften des Routers, mit denen Sie nachverfolgen können, auf welchem ​​​​Router sich der Benutzer gerade befindet.

Wir werden das NavigationEnd-Ereignis der Angular-Route besprechen

Was ist Navigationsende??

Ein Ereignis, das ausgelöst wird, wenn eine Navigation erfolgreich beendet wird.

Wie benutzt man??

• Innerhalb des Konstruktors abonnieren Sie Router-Ereignisse.
• Dann überprüfen Sie, ob der angegebene Wert eine Instanz von Navigation End ist oder nicht.
• Wenn ja, verwenden Sie diesen abonnierten Wert und verwenden value.url, um die URL zu finden, zu der der Benutzer derzeit navigiert ist, und fügen Logik ein.
• Zuletzt schreiben Sie Ihre Logik gemäß value.url

Meine app.component.html sieht so aus

Hier können Sie sehen, dass ich Header nur zeige, wenn die Eigenschaft „showHeader“ wahr ist

Meine app.component.ts sieht so aus

Wenn ich jetzt auf die Schaltfläche „Senden“ klicke, wird es zum „Dashboard“ weitergeleitet
und zeigt die Dashboard-Komponente an.

* Dadurch wird Header-Komponente sichtbar *

Das Arbeits-Repository als Referenz
https://stackblitz.com/edit/angular-ivy-atods7?file=src/app/app.component.ts

Github-Link
https://github.com/deepa314/angular-ivy-atods7.git

Ich hoffe es hilft euch :)
Wenn es euch gefällt bitte liken, teilen und abonnieren