【5】【2】Auguar改造在线竞拍应用

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>

【5】 【2】Auguar改造在线竞拍应用

猜你喜欢

【5】【2】Auguar改造在线竞拍应用