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显示商品详情的内容，图片是定死的

  
  
{{productTitle}}

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

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

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

在app.component.html定义好插座

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

  

    
    

      
{{product.price}}元
      
{{product.title}}
      
{{product.desc}}
    
  

点进来之后.png