点进来之前.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
