This article is a mirror article of machine translation, please click here to jump to the original article.

Architect_Programmer_Code Agriculture Network»Architect › Front-end design & web › Front-end frame › Angular 18 Series (21) Router Routing Change Events ...
View: 2462|Reply: 0

[Angular] Angular 18 Series (21) Router Routing Change Events

[Copy link]
Posted on 8/5/2024 2:11:09 PM | | | |
Requirements: Detect changes in Angular Route routes, toggle the menu in the navigation bar, and dynamically modify the title of the web page by injecting Title when the route is loaded.

To do this, we'll create a simple App component and inject its Router into the constructor:

Such RouterEvents serve as the base class (in alphabetical order) for these router-related events:

  • GuardsCheckEnd
  • GuardsCheckStart
  • NavigationCancel
  • NavigationEnd
  • NavigationError
  • NavigationSkipped
  • NavigationStart
  • ResolveEnd
  • ResolveStart
  • RoutesRecognized


Reference:The hyperlink login is visible.

The above list of categories is a potential result that your router may emit. For example, if a user starts navigating to a new view, the events NavigationStart and NavigationEnd will be called.

To get this information (and more), we can subscribe to the router.events event with the following code:

Filter events by if condition, the code is as follows:

If you only want one event, e.g. NavigationEnd, we can filter() bring in and transfer an observable from RxJS so that it is emitted only on specific events:

Modify the page title code:


When you click the menu to switch routes, the rendering is as follows:



(End)





Previous:Angular 18 series (twenty) environment variables are used by Environments
Next:MySQL command-line query results return ? question mark

Related Posts
Disclaimer:
All software, programming materials or articles published by Code Farmer Network are only for learning and research purposes; The above content shall not be used for commercial or illegal purposes, otherwise, users shall bear all consequences. The information on this site comes from the Internet, and copyright disputes have nothing to do with this site. You must completely delete the above content from your computer within 24 hours of downloading. If you like the program, please support genuine software, purchase registration, and get better genuine services. If there is any infringement, please contact us by email.
Mail To:help@itsvse.com