Angular4路由几步走

点进来之前.png

效果如图，就是能够点击商品名字看到每个商品对应的详情页面

配置productDetail组件

ng g component productDetail

在productdetail.component.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 {
  productTitle:string;
  constructor(private routeInfo: ActivatedRoute) { }
  ngOnInit() {
   //快照
    this.productTitle = this.routeInfo.snapshot.params["productTitle"]
  }
}

在productDetail.component.html显示商品详情的内容，图片是定死的

<div>
  <img src="http://via.placeholder.com/350x150">
  <h4>{{productTitle}}</h4>
</div>

在app.moudles.ts里面配置路由

const routeConfig:Routes = [
  {path:'',component:HomeComponent},
  {path:'product/:productTitle',component:ProductdetailComponent}
]

imports: [
    BrowserModule,
    //注入路由配置
    RouterModule.forRoot(routeConfig)
  ]

在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>

在product.component.html里面设置路由链接

<div *ngFor="let product of products" class="col-md-4 col-sm-4 col-lg-4">
  <div class="thumbnail">
    <img [src]="imgUrl">
    <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>
</div>

点进来之后.png