Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the basic usage of Angular routing". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the basic usage of Angular routing"?

Environment:

Angular CLI: 11.0.6

Angular: 11.0.7

Node: 12.18.3

Npm: 6.14.6

IDE: Visual Studio Code

1. Abstract

To put it simply, in the address bar, different addresses (URL) correspond to different pages, which is called routing. At the same time, click the forward and back buttons of the browser, and the browser will navigate forward or backward in your browsing history, which is also based on routing.

In Angular, Router is a separate module, defined in the @ angular/router module

Router can cooperate with NgModule for delayed loading (lazy loading) and preloading of modules (see "Angular getting started to Mastering Series tutorials (11)-Modules (NgModule), delayed loading Modules")

Router manages the lifecycle of the component, and it is responsible for creating and destroying the component.

For a new AngularCLI-based project, you can use the option to add AppRoutingModule to the app.component.ts by default during initialization.

two。 Basic usage of Router

2.1. Prepare for

Let's first create two pages to illustrate the use of routing:

Ng g c page1ng g c page2

Use the above AnuglarCLI command to create two components, Page1Component and Page2Component.

2.2. Register a rout

/ / src\ app\ app-routing.module.tsconst routes: Routes = [{path: 'page1', component: Page1Component}, {path:' page2', component: Page2Component},]; @ NgModule ({imports: [RouterModule.forRoot (routes)], exports: [RouterModule],}) export class AppRoutingModule {}

As you can see, a simple route registration requires only path and component2 attributes to define the relative path of the route, as well as the response component of this route.

2.3. Usage in html

Page1 | Page2

In the html template, use the routerLink attribute directly to identify the route as angular. When you execute the code, you can see two hyperlinks, Page1 and Page2. Click to see the address bar address is changed to http://localhost:4200/page2 or http://localhost:4200/page1, and the page content is switched between page1 and page2.

2.4. Usage in ts code

Sometimes, you need to jump according to the business logic in ts. In ts, you need to inject Router instances, such as

Constructor (private router: Router) {}

Jump code:

/ / Jump to / page1 this.router.navigate (['/ page1']); / / Jump to / page1/123 this.router.navigate (['/ page1', 123]); 3. Receiving parameters

3.1. Parameters in the path

In general, we take the parameter as a segment of the url, such as / users/1, which represents the user whose query id is 1, and the route is defined as "/ users/id".

For our simple page, for example, our page1 page can pass the id parameter, then we need to change our routing to:

Const routes: Routes = [{path: 'page1/:id', / / receive id parameter component: Page1Component,}, {/ / tips for implementing optional parameters. This routing handles url path with no parameters: 'page1', redirectTo:' page1/', / / Jump to 'page1/:id'}, {path:' page2', component: Page2Component,},]

When the ts code reads the parameters, you first need to inject ActivatedRoute, as shown in the following code:

Constructor (private activatedRoute: ActivatedRoute) {} ngOnInit (): void {this.activatedRoute.paramMap.subscribe ((params) = > {console.log ('Parameter id:', params.get ('id') / / address http://localhost:4200/page1/33 / / console output: Query Parameter name: 33 / / address http://localhost:4200/page1/ console output: Query Parameter name: (the actual result is undefined)});}

3.2. Parameters in parameters (QueryParameter)

There is another way to write parameters, such as http://localhost:4200/?name=cat, that is, the URL address, followed by a question mark'?', followed by the parameter name and parameter value ('name=cat'). This is called a query parameter (QueryParameter).

When taking this query parameter, it is similar to the previous routing parameter, except that paramMap is changed to queryParamMap. The code is as follows:

This.activatedRoute.queryParamMap.subscribe ((params) = > {console.log ('Query Parameter name:', params.get ('name')); / / address http://localhost:4200/page1?name=cat / / console output: Query Parameter name: cat / / address http://localhost:4200/page1/ console output: Query Parameter name: (actual result is undefined)}); 4. URL path display format

Unlike traditional pure static (html) sites, the url in angular does not correspond to a real file (page) because the Routing processing taken over by anuglar determines which Component to display to the end user. For different scenarios, there are two URL path display formats for angular:

Http://localhost:4200/page1/123

Http://localhost:4200/#/page1/123

The default is the first one, without #. If necessary, you can add useHash: true to app-routing.ts, such as:

/ / app-routing.ts@NgModule ({imports: [RouterModule.forRoot (routes, {useHash: true})], exports: [RouterModule],}) Thank you for reading. The above is the content of "what is the basic usage of Angular routing". After the study of this article, I believe you have a deeper understanding of what the basic usage of Angular routing is, and the specific usage needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.