字符串插值: {{ }}

<!--插值会把属性的值作为文本渲染出来-->
<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() {                                              //初始化服务
  }
}