使用angular2创建一个“超市购物清单结算”小项目 ，实现商品添加、购买商品展示、购买商品删除等常用功能 有以下实现细节：1、点击添加，跳转到“添加商品”页面 2、“添加商品”页面，输入名称，数量，单价，另外，金额通过数量单价自动计算 3、点击“确定”回到列表页，同时列表更新，出现新添加的商品 4、点击返回”则直接回到列表页，列表不更新 5、“添加商品”页面，数量可通过“-+”按钮实现数量的增减

好的，这是一个比较完整的项目，需要使用Angular2框架来完成。下面是一些实现细节的代码示例：

1. 添加商品页面跳转

在列表页中，添加按钮可以使用路由跳转到添加商品页面：

<a routerLink="/add">添加商品</a>

在模块中定义路由：

import { AddComponent } from './add.component';

const routes: Routes = [
  { path: '', component: ListComponent },
  { path: 'add', component: AddComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 添加商品页面

添加商品页面中，使用表单来输入商品信息。使用ngModel指令来绑定表单控件和组件中的变量：

<form (ngSubmit)="onSubmit()" #addForm="ngForm">
  <label>名称:</label>
  <input type="text" name="name" [(ngModel)]="product.name" required>

  <label>数量:</label>
  <div class="quantity">
    <button type="button" (click)="decrease()" class="btn btn-secondary">-</button>
    <input type="number" name="quantity" [(ngModel)]="product.quantity" required>
    <button type="button" (click)="increase()" class="btn btn-secondary">+</button>
  </div>

  <label>单价:</label>
  <input type="number" name="price" [(ngModel)]="product.price" required>

  <label>金额:</label>
  <input type="number" name="amount" [(ngModel)]="product.amount" disabled>

  <button type="submit" class="btn btn-primary">确定</button>
  <button type="button" (click)="goBack()" class="btn btn-secondary">返回</button>
</form>

在组件中定义变量和方法：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Product } from './product';

@Component({
  selector: 'app-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.css']
})
export class AddComponent implements OnInit {
  product: Product = new Product();

  constructor(private router: Router) { }

  ngOnInit(): void {
  }

  onSubmit() {
    // 添加商品到列表中
    // ...

    // 返回列表页
    this.router.navigate(['/']);
  }

  goBack() {
    // 返回列表页
    this.router.navigate(['/']);
  }

  increase() {
    // 数量加1
    this.product.quantity++;
    this.product.amount = this.product.quantity * this.product.price;
  }

  decrease() {
    // 数量减1
    if (this.product.quantity > 1) {
      this.product.quantity--;
      this.product.amount = this.product.quantity * this.product.price;
    }
  }
}

3. 列表页更新

在添加商品成功后，需要将新商品添加到列表中。可以使用服务来实现商品列表的共享：

import { Injectable } from '@angular/core';
import { Product } from './product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  products: Product[] = [];

  constructor() { }

  addProduct(product: Product) {
    this.products.push(product);
  }

  deleteProduct(index: number) {
    this.products.splice(index, 1);
  }
}

在列表页组件中，使用服务来获取商品列表，并在添加商品后更新列表：

import { Component, OnInit } from '@angular/core';
import { ProductService } from './product.service';
import { Product } from './product';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
  products: Product[] = [];

  constructor(private productService: ProductService) { }

  ngOnInit(): void {
    this.products = this.productService.products;
  }

  deleteProduct(index: number) {
    this.productService.deleteProduct(index);
  }
}

在添加商品页面中，提交表单时将新商品添加到列表中：

onSubmit() {
  // 添加商品到列表中
  this.productService.addProduct(this.product);

  // 返回列表页
  this.router.navigate(['/']);
}

4. 返回列表页

在添加商品页面中，点击返回按钮时直接跳转到列表页：

goBack() {
  // 返回列表页
  this.router.navigate(['/']);
}

5. 数量增减

在添加商品页面中，使用按钮来实现数量的增减。需要注意的是，使用[(ngModel)]来绑定的变量不支持直接修改。因此，需要在增减按钮的事件中分别修改数量和金额。

<div class="quantity">
  <button type="button" (click)="decrease()" class="btn btn-secondary">-</button>
  <input type="number" name="quantity" [(ngModel)]="product.quantity" required>
  <button type="button" (click)="increase()" class="btn btn-secondary">+</button>
</div>

increase() {
  // 数量加1
  this.product.quantity++;
  this.product.amount = this.product.quantity * this.product.price;
}

decrease() {
  // 数量减1
  if (this.product.quantity > 1) {
    this.product.quantity--;
    this.product.amount = this.product.quantity * this.product.price;
  }
}