对对对相当大

结构型指令：eg：*ngFor， *ngIf
插值表达式：{{}}
属性绑定：[]
事件绑定：()

组件包含三部分：ts类，html，css。

输入、输出属性：@Input，@Output。

<app-product-alerts
	  [product]="product">
</app-product-alerts>


@Input() product;

@Output() notify = new EventEmitter();

<app-product-alerts
	  (notify)="onNotify()">
</app-product-alerts>

<button (click)="notify.emit()">Notify Me</button>

路由：

 { path: 'products/:productId', component: ProductDetailsComponent },
 
<a [routerLink]="['/products', productId]">
      {{ product.name }}
    </a>
    
 private route: ActivatedRoute,
this.route.paramMap.subscribe(params => {
    this.product = products[+params.get('productId')];
  });
// 或者：
const id = +this.route.snapshot.paramMap.get('id');

ng generate module app-routing --flat --module=app

注：
–flat 把这个文件放进了 src/app 中，而不是单独的目录中。
–module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。

 genId(heroes: Hero[]): number {
    return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 11;
  }

<li *ngFor="let hero of heroes$ | async" >

$ 是一个命名惯例，用来表明 heroes$ 是一个 Observable，而不是数组。
*ngFor 不能直接使用 Observable。 不过，它后面还有一个管道字符（|），后面紧跟着一个 async，它表示 Angular 的 AsyncPipe。