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"];
}
}