Angular中的ActivatedRoute和Router原理解释

{ path: 'product/:id', component: ProductDetailComponent }

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-product-detail',
  template: 'Product Details Component'
})
export class ProductDetailComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}
  nGonInit() {
    const id = +this.route.snapshot.paramMap.get('id');
    // ...
  }
}

const id = +this.route.snapshot.paramMap.get('id');

this.route.paramMap.subscribe(params => {
  const id = +params.get('id');
  // ...
});

// app-routing.module.ts file
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductListComponent },
  { path: 'products/:id', component: ProductDetailComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<!-- home.component.html -->
<a routerLink="/">Home</a>
<a routerLink="/products">Product List</a>
<!-- product-list.component.html -->
<ul>
    <li *ngFor="let product of products">
        <a [routerLink]="['/products', product.id]">{{ product.name }}</a>
    </li>
</ul>
<!-- product-detail.component.html -->
<h2>Product Detail</h2>
<p>{{ product }}</p>