字符串插值: {{ }}

<!--插值会把属性的值作为文本渲染出来-->
<h3>
      {{ product.name }}
</h3>

条件判断: *ngIf

<!--如果条件为真,会渲染该标签,否则不会渲染该标签-->
<p *ngIf="product.description">
    Description: {{ product.description }}
</p>

循环处理: *ngFor

<!--这个 <div> 就会被列表中的每个商品都重复渲染一次。-->
<div *ngFor="let product of products">
</div>

属性绑定: []

<!--属性绑定会将右侧的属性值赋给左侧的属性,有“从右到左”的方向性-->
<a [title]="product.name + ' details'">
      {{ product.name }}
</a>

事件绑定: ()

<!--当发生左侧事件时,会调用右侧处理函数,有“从左到右”的方向性-->
<button (click)="share()">
    Share
</button>

创建组件: Component

import { Component, OnInit } from '@angular/core';          //导入组件
import { Input, Output, EventEmitter } from '@angular/core';
@Component({                                                //@Component装饰器
  selector: 'app-product-alerts',                           //HTML标签
  templateUrl: './product-alerts.component.html',           //HTML模板
  styleUrls: ['./product-alerts.component.css']             //CSS样式
})
export class ProductAlertsComponent implements OnInit {     //实现接口
  @Input() product;                                         //该属性从外部接收“值”
  @Output() notify = new EventEmitter();                    //该属性向外部发送“事件”
  constructor() { }                                         //依赖注入、引入服务
  ngOnInit() {                                              //初始化服务
  }
}

使用路由: Router

编辑模块文件src/app/app.module.ts,注册路由条目

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ProductListComponent },                       //缺省路由
      { path: 'products/:productId', component: ProductDetailsComponent }, //增加路由
    ])
  ],

编辑模板文件,向链接标签增加[routerLink]指令

<div *ngFor="let product of products; index as productId">  <!--获取索引值-->
  <h3><a [title]="product.name + ' details'" 
       [routerLink]="['/products', productId]">             <!--增加[routerLink]指令-->
      {{ product.name }}</a>
  </h3>
</div>

编辑组件文件,使用路由信息

import { ActivatedRoute } from '@angular/router';
export class ProductDetailsComponent implements OnInit {
  product;                                                  //用于接收数据
  constructor(private route: ActivatedRoute){ }             //注入活动路由
  ngOnInit() {
        this.route.paramMap.subscribe(params => {           //从参数字典抽取信息
        this.product = products[+params.get('productId')];
      });
    }
}

使用服务: Service

服务可以用于在应用的各个部件之间共享数据。

首先定义并实现服务

import { Injectable } from '@angular/core';
@Injectable({                               //服务“可以注入”其它组件以提供数据
  providedIn: 'root'                        //在root级别提供服务
})
export class CartService {
  items = [];
  constructor(private http: HttpClient) {}  //服务也可以进一步使用更底层的服务
  addToCart(product) {
    this.items.push(product);
  }
  getItems() {
    return this.items;
  }
  clearCart() {
    this.items = [];
    return this.items;
  }
  getShippingPrices() {
    return this.http.get('/assets/shipping.json');
  }
}

在组件构造函数中注入服务以便使用它

export class ProductDetailsComponent implements OnInit {
  constructor(
    private cartService: CartService        //以private方式注入服务
  ) { }
  addToCart(product) {
    this.cartService.addToCart(product);    //使用服务提供的功能
  }
  getShippingPrices() {
    return this.http.get('/assets/shipping.json');
  }
}

在模板中使用async管道方式“持续使用”从服务获取的数据

<h3>Shipping Prices</h3>
<div class="shipping-item" *ngFor="let shipping of shippingCosts | async">
  <span>{{ shipping.type }}</span>
  <span>{{ shipping.price | currency }}</span>
</div>

使用表单: Form

响应式表单包含两个部分:组件中那些用于存储和管理表单的对象,以及表单在模板中的可视化。

定义结帐的表单模型

//app.module.ts
@NgModule({
  imports: [
    ReactiveFormsModule,                        //导入响应式表单模块

//src/app/cart/cart.component.ts
export class CartComponent implements OnInit {
  checkoutForm;                                 //用于存储表单模型
  constructor(
    private formBuilder: FormBuilder            //在组件中注入表单构建器
  ) {
    this.checkoutForm = this.formBuilder.group({//创建表单模型
      name: '',
      address: ''
    });
  }
  onSubmit(customerData) {
    // Process checkout data here
    console.warn('Your order has been submitted', customerData);
    this.items = this.cartService.clearCart();
    this.checkoutForm.reset();                  //重置表单模型
  }
}

在模板中呈现表单

<!-- 使用[formGroup]绑定表单模型,使用(ngSubmit)提交表单处理 -->
<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
  <div>
    <label for="name">Name</label>
    <input id="name" type="text" formControlName="name">
  </div>
  <div>
    <label for="address">Address</label>
    <input id="address" type="text" formControlName="address">
  </div>
  <button class="button" type="submit">Purchase</button>
</form>