路由

app HTML

<app-navbar></app-navbar>
<div class="carousel-container">
  <div class="row">
    <div class="col-md-3">
      <app-search></app-search>
    </div>
    <div class="col-md-9">
       <router-outlet></router-outlet>
    </div>

  </div>
</div>
<app-footer></app-footer>

app modele.ts

const routeConfig: Routes = [
  {path: '', component: HomeComponent},
  {path: 'product/:prodTitle', component: ProductdetailComponent}
];
@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    FooterComponent,
    SearchComponent,
    CarouselComponent,
    ProductComponent,
    StarsComponent,
    ProductdetailComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,

    // 把路由注入到主模块
    RouterModule.forRoot(routeConfig)

    // RouterModule.forChild(routeConfig);
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

product HTML

<div  *ngFor="let product of products" class="col-md-4 col-lg-6 col-sm-9">
  <div  class="img-thumbnail" >
    <img [src]="imgUrl" alt="#">
    <div class="caption">
      <h4 class="pull-right">{{product.price}}元</h4>
      <h4><a [routerLink]="['/product',product.title]">{{product.title}}</a></h4>
      <p>{{product.desc}}</p>
    </div>
    <div>
      <app-stars [rating]="product.rating"></app-stars>
    </div>
  </div>
</div>

4.productDetail.ts

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

@Component({
  selector: 'app-productdetail',
  templateUrl: './productdetail.component.html',
  styleUrls: ['./productdetail.component.css']
})
export class ProductdetailComponent implements OnInit {
  public productTitle: string;
  constructor( private routeInfo: ActivatedRoute) { }

  ngOnInit(): void {
    this.productTitle = this.routeInfo.snapshot.params["prodTitle"];
  }

}