Detailed explanation of Angular routing basics

1. Routing related objects

Router and RouterLink have the same function, which is navigation. Router is used in Controller, and RouterLink is used in template.

2. Location of routing objects

1. Routes object

Configuration is in the module. Routes consists of a set of configuration information, each of which contains at least two attributes, Path and Component.

2. RouterOutlet

In the template

3.RouterLink

Instructions to generate links in templates and change URLs

4. Router

In the Controller, call the navigate method of the Router object to switch routes.

5. ActivatedRoute

When routing, data is passed through the URL and the data is saved in the ActivatedRoute object.

3. Routing Configuration

When using the ng new --routing parameter, an additional app-routing.module.ts file will be generated

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

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

Will automatically import into app.module.ts.

Generate two components: home component and component component.

const routes: Routes = [
  {path: '', component : HomeComponent}, //path is empty{path: 'product', component: ProductComponent}
];

Notice:

1. The path configuration cannot start with a slash and cannot be configured as path:'/product'.

Because the Angular router parses and generates URLs, not starting with / allows you to use relative and absolute paths freely when navigating between multiple views.

2. When writing a path in a template, it must start with /.

Because using a slash plus a . indicates whether you want to navigate to the root route (/) or the sub-route (./).

/ means navigating to the root route and searching from the layer where the root route is configured.

<a [routerLink]="['/']">Home</a>

3. Display component content under <router-outlet>

4. The routerLink parameter is an array instead of a string

Because parameters can be passed during routing.

4. Navigating through the Router object in the code

Add a button to the template

<input type="button" value="Product Details" (click)="toProductDetails()">

Use router.navigate to navigate in the controller.

The navigate parameter is configured the same as the routerLink parameter.

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router:Router){
  }
  toProductDetails(){
    this.router.navigate(['/product']);
  }
}

Clicking a button has the same effect as clicking a link.

5. Configuring a non-existent path

Generate code 404 component to show that the page does not exist.

The first matched route takes precedence, so the ** wildcard route should be placed last.

const routes: Routes = [
  { path: '', component: HomeComponent }, // path is empty { path: 'product', component: ProductComponent },
  { path: '**', component: Code404Component }
]; 

6. Redirection Routing

Redirects an address to another specified component

www.aaa.com => www.aaa.com/products

www.aaa.com/x => www.aaa.com/y The user may have bookmarked the x address.

Using redirect routing

const routes: Routes = [
  { path: '', redirectTo : 'home', pathMatch:'full' }, //The path is empty { path: 'home', component: HomeComponent },
  { path: 'product', component: ProductComponent },
  { path: '**', component: Code404Component }
];

7. Passing data during routing

There are 3 ways

1. Passing data in query parameters

2. Passing data in the routing path

When defining the routing path, you need to specify the parameter name and carry the parameter in the actual path.

3. Passing data in routing configuration

The above is a detailed explanation of the basics of Angular routing. For more information about the basics of Angular routing, please pay attention to other related articles on 123WORDPRESS.COM!