这个得上一篇:https://ithelp.ithome.com.tw/articles/10258341
这里要来写"加入购物车"
从cmd来新增打入语法ng generate component components/cart-status:
这里从app.component.html档案:
目前长这样的语法
<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>
对应cart-status.component.ts档案的app-cart-status
然後档案app.component.html 的语法剪下:
<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>
贴到cart-status.component.html档案.总价改成36.98
查看是否有变更:
到product-list-grid.component.html档案变更加入button
要全部做完返红才会消失
到product-list.component.ts档案去加入method
用chrom的开发者工具去看是否有作动
import { Component, OnInit } from '@angular/core';
import { ProductService } from 'src/app/services/product.service';
import { Product } from 'src/app/common/product';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-product-list',
templateUrl: './product-list-grid.component.html',
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
products: Product[];
currentCategoryId: number = 1;
previousCategoryId: number=1;
searchMode: boolean = false;
thePageNumber: number = 1;
thePageSize: number = 5;
theTotalElements: number = 0;
previousKeyword: string=null;
constructor(private productService: ProductService,
private Route: ActivatedRoute) { }
// tslint:disable-next-line: typedef
ngOnInit() {
this.Route.paramMap.subscribe(() => {
this.listProducts();
});
}
// tslint:disable-next-line: typedef
listProducts() {
this.searchMode = this.Route.snapshot.paramMap.has('keyword');
if (this.searchMode) {
this.handleSearchProducts();
}
else {
this.handleListProducts();
}
}
handleSearchProducts() {
const theKeyword: string = this.Route.snapshot.paramMap.get('keyword');
if(this.previousKeyword != theKeyword){
this.thePageNumber =1;
}
this.previousKeyword =theKeyword;
console.log(`keyword=${theKeyword},thePageNumber=${this.thePageNumber}`);
this.productService.searchProductsPaginate(this.thePageNumber -1,
this.thePageSize,
theKeyword).subscribe(this.processResult());
}
handleListProducts() {
const hasCategoryId: boolean = this.Route.snapshot.paramMap.has('id');
if (hasCategoryId) {
this.currentCategoryId = +this.Route.snapshot.paramMap.get('id');
}
else {
this.currentCategoryId = 1;
}
if (this.previousCategoryId != this.currentCategoryId) {
this.thePageNumber = 1;
}
this.previousCategoryId=this.currentCategoryId;
console.log(`currentCategoryId=${this.currentCategoryId},thePageNumber=${this.thePageNumber}`);
this.productService.getProductListPaginate(this.thePageNumber -1,
this.thePageSize,
this.currentCategoryId)
.subscribe(this.processResult());
}
processResult(){
return data =>{
this.products=data._embedded.products;
this.thePageNumber=data.page.number +1;
this.thePageSize =data.page.size;
this.theTotalElements =data.page.totalElements;
};
}
updatePageSize(pageSize: number){
this.thePageSize=pageSize;
this.thePageNumber=1;
this.listProducts();
}
addToCart(theProduct: Product){
console.log(`Adding to cart: ${theProduct.name},${theProduct.unitPrice}`);
}
}
这个的下一篇:https://ithelp.ithome.com.tw/articles/10258374
目录服务,X.500和LDAP 目录是有关对象的信息的存储库。目录服务提供对目录的访问。X.500标...
大家好我是长风青云,今天不停被打扰QAQ。是有没有要让我录影片,不是打电话过来狂CALL,就是直接呼...
函式传递参数 每次调用函式时都打印相同的hello word的函式不是很有用处 这时候可以传递参数给...
前言 今日的程序码 => GIHUB 说明 这是一个网路判断的一个范例,将会使用 data_c...
说到了 controller 就不得不说一下 API,简单来说就是负责建立客户所需的内容和产生所需回...