Angular第一个应用用到的模版语法

<div *ngFor="let product of products">

*ngFor循环遍历products数组（类似vue的v-for）

 <a [title]="product.name + ' details'">
      {{ product.name }}
 </a>

[title]数据绑定（类似vue的v-bind？）

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

*ngIf如果有则显示，没有则不显示（类似vue的v-if）

  <button (click)="share()">
    Share
  </button>

（click）事件绑定（类似vue的v-on）

// src/app/product-alerts/product-alerts.component.ts
import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';
import { Output, EventEmitter } from '@angular/core';

export class ProductAlertsComponent implements OnInit {
  @Input() product;// 引入父组件中的product
  @Output() notify = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

}

<!-- src/app/product-list/product-list.component.html -->
<app-product-alerts
  [product]="product">
</app-product-alerts>

（类似vue中绑定值后通过props引入父组件的值）

<!-- src/app/product-alerts/product-alerts.component.html -->
<p *ngIf="product.price > 700">
  <button (click)="notify.emit()">Notify Me</button>
</p>

向父组件发送一个notify事件

<!-- src/app/product-list/product-list.component.html -->
<app-product-alerts
  [product]="product" 
  (notify)="onNotify()">
</app-product-alerts>

父组件收到notify变化，执行onNotify()函数，函数在src/app/product-list/product-list.component.ts中定义