第34天~

这个的上一篇:https://ithelp.ithome.com.tw/articles/10258216

点下面的连结可以连到明细~

其实这个是因为多了一行


<app-product-list></app-product-list>

正确code应该是要:

<div class="page-wrapper">

  <!-- MENU SIDEBAR-->
  <aside class="menu-sidebar d-none d-lg-block">
    <div class="logo">
      <a href="#">
        <img src="assets/images/logo.png" alt="luv2shop" class="img-responsive">
      </a>
    </div>


    <app-product-category-menu></app-product-category-menu>


  </aside>
  <!-- END MENU SIDEBAR-->

  <div class="page-container">
    <!-- HEADER DESKTOP-->
    <header class="header-desktop">
      <div class="section-content section-content-p30">
        <div class="container-fluid">
          <div class="header-wrap">

           <app-search></app-search>



            <div class="cart-area d-n">
              <a href="shopping-detail.html">
                <div class="total">19.22 <span> 2</span> </div> <i class="fa fa-shopping-cart"
                  aria-hidden="true"></i>
              </a>
            </div>
          </div>
          <div class="account-wrap"></div>
        </div>
      </div>
    </header>
    <!-- END HEADER DESKTOP-->

    <!-- MAIN CONTENT-->
<router-outlet></router-outlet>


  

</div>
</div>

<!-- END PAGE CONTAINER-->


<footer>
  <ul>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Help</a></li>
  </ul>
</footer>

从档案来修改:

<div class="detail-section">

 <div class="container-fluid">

  <img src="{{product.imageUrl}}" class="detail-img">

  <h3>{{product.name}}</h3>

  <div class="price">{{product.unitPrice |currency:'USD'}}</div>
  <a href="#" class="primary-btn">Add to cart</a>

  <hr>
  <h4>Description</h4>
  <p>{{product.description}}</p>


 </div>
</div>

增加一个返回的选项:

<div class="detail-section">

 <div class="container-fluid">

  <img src="{{product.imageUrl}}" class="detail-img">

  <h3>{{product.name}}</h3>

  <div class="price">{{product.unitPrice |currency:'USD'}}</div>
  <a href="#" class="primary-btn">Add to cart</a>

  <hr>
  <h4>Description</h4>
  <p>{{product.description}}</p>


  <a routerLink="/products" class="mt-5">Back to Product List</a>


 </div>
</div>

到product-details.component.ts档案更新:

import { Routes, ActivatedRoute } from '@angular/router';
import { ProductService } from 'src/app/services/product.service';
import { Product } from 'src/app/common/product';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product-details',
  templateUrl: './product-details.component.html',
  styleUrls: ['./product-details.component.css']
})
export class ProductDetailsComponent implements OnInit {

  product:Product = new Product();

  constructor(private ProductService:ProductService,
              private route:ActivatedRoute) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe(() =>{
      this.handleProductDetails();
    })
  }
  handleProductDetails() {
    const theProductId:number = +this.route.snapshot.paramMap.get('id');

    this.ProductService.getProduct(theProductId).subscribe(

      data =>{

        this.product = data;
      }
    )


  }

}

可以用网站的开发者工具来确认自己写的网页是否有错误

回到前面的id反红是因为根本没有id这个变数

新增延伸模组angular language Service:

开始新增从档案product.ts:

export class Product {
   id:string;
   sku: string;
   name: string;
   description: string;
   unitPrice: number;
   imageUrl: string;
   active: boolean;
   unitsInStock: number;
   dateCreated: Date;
   lastUpdated: Date;


}

反红不见了

後面要来写选"页"功能http://localhost:8080/api/products?page=0&size=10

安装bootstrap使用语法:ng add @angular/localize

然後再打上语法ng add @angular/localize

到档案app.module.ts去增加语法:

import { ProductService } from './services/product.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ProductListComponent } from './components/product-list/product-list.component';
import { HttpClientModule } from '@angular/common/http';
import {Routes, RouterModule} from '@angular/router';
import { ProductCategoryMenuComponent } from './components/product-category-menu/product-category-menu.component';
import { SearchComponent } from './components/search/search.component';
import { ProductDetailsComponent } from './components/product-details/product-details.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

const rotutes:Routes =[
  {path: 'products/:id', component: ProductDetailsComponent},
  {path: 'search/:keyword', component: ProductListComponent},
  {path:'category/:id',component: ProductListComponent},
  {path:'category',component: ProductListComponent},
  {path:'prouducts',component: ProductListComponent},
  {path:'',redirectTo:'prouducts',pathMatch:'full'},
  {path:'**',redirectTo:'prouducts',pathMatch:'full'},
]
@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
    ProductCategoryMenuComponent,
    SearchComponent,
    ProductDetailsComponent
  ],
  imports: [
    RouterModule.forRoot(rotutes),
    BrowserModule,
    HttpClientModule,
    NgbModule
  ],
  providers: [ProductService],
  bootstrap: [AppComponent]
})
export class AppModule { }