Detailed explanation of Angular routing sub-routes

1. Sub-route syntax

2. Examples

On the product details page, in addition to the product ID information, it also displays the product description and the salesperson's information.

The product description component and salesperson information component are displayed inside the product details component through sub-routing.

1. Create 2 new components and modify their contents

ng g component productDesc
ng g component sellerInfo

The key point is to modify the salesperson information component to display the salesperson ID.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-seller-info',
  templateUrl: './seller-info.component.html',
  styleUrls: ['./seller-info.component.css']
})
export class SellerInfoComponent implements OnInit {
  private sellerId: number;
  constructor(private routeInfo: ActivatedRoute) { }

  ngOnInit() {
    this.sellerId = this.routeInfo.snapshot.params["id"];
  }

}

2. Modify the routing configuration

Add sub-routes to the product component

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

3. Modify the template of product.component.ts

Note: routerLink must be configured as ./ and / cannot be used again.

<p>
  This is the product information component</p>
<p>
  The product id is: {{productId}}
</p>

<a [routerLink]="['./']">Product Description</a>
<a [routerLink]="['./seller',99]">Salesperson information</a>
<router-outlet></router-outlet>

Effect:

The main route is /product/2, and the sub-route is an empty string:

The product details component of the main route is displayed, and the product description component corresponding to the empty string of the sub-route is also displayed.

Click the salesperson information link:

The URL path becomes: http://localhost:4201/product/2/seller/99.

The sub-route seller/99 and the corresponding sellerInfo component are also displayed.

Notice:

1. The socket router-out forms a parent-child relationship and can be nested infinitely

2. All routing information is configured at the module level in app.routing.module.ts.

Routing information is at the module level, and all components themselves do not know any information related to routing.

Parent-child relationship between sockets - child routing.

Sibling relationship between sockets - auxiliary routing.

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