Angular Learning Talk about Routing (Routing)

This article will take you to continue learning angular, briefly understand routing in Angular, introduce the basic usage of routing, and see how to receive parameters. I hope it will be helpful to everyone!

Environment:

• Angular CLI: 11.0.6

• Angular: 11.0.7

• Node: 12.18.3

• npm : 6.14.6

• IDE: Visual Studio Code

1. Summary

Simply speaking, in the address bar, different addresses ( URL) corresponds to different pages, this is routing. Also, by clicking the browser's forward and back buttons, the browser will navigate forward or backward in your browsing history, again based on routing. [Related tutorial recommendations: "angular Tutorial"]

In Angular, Router is an independent module, defined in the @angular/router module,

• Router can cooperate with NgModule to perform lazy loading (lazy loading) and preloading operations of modules (refer to "Angular Getting Started to Mastery Series Tutorials (11) - Module (NgModule), Delayed Loading Module");

• Router will manage the life cycle of components, and it will be responsible for creating and destroying components.

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

2. Basic usage of Router

2.1. Preparation

We first create 2 pages to illustrate the use of routing:

ng g c page1
ng g c page2

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

2.2. Register route

//src\app\app-routing.module.ts
const routes: Routes = [
  {
    path: 'page1',
    component: Page1Component
  },
  {
    path: 'page2',
    component: Page2Component
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

As you can see, simple route registration only requires two attributes, path and component, to define the route respectively. The relative path, and response component of this route.

2.3. Usage in html

<a routerLink="page1">Page1</a> |
<a routerLink="page2">Page2</a>

In the html template, directly use the routerLink attribute to identify the angular route. After executing the code, you can see two hyperlinks, Page1 and Page2. Click to see that the address bar address is changed to http://localhost:4200/page2 or http://localhost:4200/page1. The page content is in page1 and page2. Switching

2.4. Usage in ts code

Sometimes, it is necessary to jump based on the business logic in ts. In ts, Router instance needs to be injected, such as

constructor(private router: Router) {}

Jump code:

  // 跳转到 /page1
  this.router.navigate(['/page1']);

  // 跳转到 /page1/123
  this.router.navigate(['/page1', 123]);

3. Receive parameters

##3.1 . Parameters in the path

const routes: Routes = [
  {
    path: 'page1/:id',    //接收id参数
    component: Page1Component,
  },
  {
    // 实现可选参数的小技巧。 这个routing处理没有参数的url
    path: 'page1',        
    redirectTo: 'page1/',   // 跳转到'page1/:id'
  },
  {
    path: 'page2',
    component: Page2Component,
  },
];

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit(): void {
  this.activatedRoute.paramMap.subscribe((params) => {
    console.log('Parameter id: ', params.get('id'));

    // 地址 http://localhost:4200/page1/33   
    // 控制台输出：Query Parameter name:  33

    // 地址 http://localhost:4200/page1/     
    // 控制台输出：Query Parameter name:   (实际结果为undefined)
  });
}

3.2. Parameters in the parameter (QueryParameter)

this.activatedRoute.queryParamMap.subscribe((params) => {
  console.log('Query Parameter name: ', params.get('name'));

  // 地址 http://localhost:4200/page1?name=cat
  // 控制台输出：Query Parameter name:  cat

  // 地址 http://localhost:4200/page1/
  // 控制台输出：Query Parameter name:   (实际结果为undefined)
});

4. URL path display format

• http://localhost:4200/page1/123

• http://localhost:4200/#/page1/123

useHash: true to app-routing.ts, such as:

// app-routing.ts
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule],
})

5. Problems encountered during deployment

https://github.com /angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

6. Summary

• angular does not support optional routing by default (e.g. /user/:id?), but we can define 2 routes pointing to the same Component to achieve this and achieve code reuse; ( Or use redirectTo)

• You can use the useHash parameter to add a # in front of the augular path;

• When reading parameters, you need to subscribe and cannot read them directly.

• For deployment issues after packaging, check the official wifi (https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure -your-server-to-work-with-html5mode)

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of Angular Learning Talk about Routing (Routing). For more information, please follow other related articles on the PHP Chinese website!