本文共 3218 字，大约阅读时间需要 10 分钟。

1 创建商品详情组件 显示商品的图片和标题

ng g component productDetail

product-detail.component.ts

import {Component, OnInit} from '@angular/core';import {ActivatedRoute} from '@angular/router';@Component({  selector: 'app-product-detail',  templateUrl: './product-detail.component.html',  styleUrls: ['./product-detail.component.css']})export class ProductDetailComponent implements OnInit {  productTitle: string;  constructor(private routeInfo: ActivatedRoute) {  }  ngOnInit() {    this.productTitle = this.routeInfo.snapshot.params['prodTitle'];  }}

product-detail.component.html

<div>  <h4>    <img src="http://placehold.it/820x230" alt="">    {  {productTitle}}  </h4></div>

 2 重构代码 把轮播图组件和商品列表组件封装进新的Home组件。

ng g component home

app.component.html 

<app-navbar></app-navbar><div class="container">  <div class="row">    <div class="col-md-3">      <app-search></app-search>    </div>    <app-home></app-home>  </div></div><app-footer></app-footer>

app.component.css

清空

home.component.html

<div class="col-md-9">  <div class="row carousel-container">    <app-carousel></app-carousel>  </div>  <div class="row">    <app-product></app-product>  </div></div>

home.component.css

.carousel-container{  margin-bottom: 40px;}

3 配置路由，在导航到商品详情时传递商品的标题参数

app.module.ts

import {BrowserModule} from '@angular/platform-browser';import {NgModule} from '@angular/core';import {AppComponent} from './app.component';import {NavbarComponent} from './navbar/navbar.component';import {FooterComponent} from './footer/footer.component';import {CarouselComponent} from './carousel/carousel.component';import {ProductComponent} from './product/product.component';import {StarsComponent} from './stars/stars.component';import {SearchComponent} from './search/search.component';import {ProductDetailComponent} from './product-detail/product-detail.component';import {HomeComponent} from './home/home.component';import {RouterModule, Routes} from '@angular/router';const routeConfig: Routes = [  {path: '', component: HomeComponent},  {path: 'product/:prodTitle', component: ProductDetailComponent},];@NgModule({  declarations: [    AppComponent,    NavbarComponent,    FooterComponent,    CarouselComponent,    ProductComponent,    StarsComponent,    SearchComponent,    ProductDetailComponent,    HomeComponent  ],  imports: [    BrowserModule,    RouterModule.forRoot(routeConfig)  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule {}

4 修改App组件，根据路由显示Home组件或商品详情组件。

app.component.html

<app-navbar></app-navbar><div class="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>

5 修改商品列表组件，给商品标题添加带routeLink指令的连接，导航到商品详情路由。

product.component.html

<div *ngFor="let product of products"class="col-md-4 col-sm-4 col-lg-4">  <div class="thumbnail">    <img src="http://placehold.it/320x150" 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>