創(chuàng)建一組組建以后，會(huì)生成
css→主要負(fù)責(zé)樣式
html→負(fù)責(zé)網(wǎng)頁(yè)顯示
ts→負(fù)責(zé)主要邏輯

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

//
@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

//定義bean屬性
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

//定義實(shí)體類
export class Hero {
  id: number;
  name: string;
}

@Component 是個(gè)裝飾器函數(shù)，用于為該組件指定 Angular 所需的元數(shù)據(jù)
CLI 自動(dòng)生成了三個(gè)元數(shù)據(jù)屬性：
selector— 組件的選擇器（CSS 元素選擇器）
templateUrl— 組件模板文件的位置。
styleUrls— 組件私有 CSS 樣式表文件的位置。

ngOnInit 是一個(gè)生命周期鉤子，Angular 在創(chuàng)建完組件后很快就會(huì)調(diào)用 ngOnInit。這里是放置初始化邏輯的好地方。
始終要 export 這個(gè)組件類，以便在其它地方（比如 AppModule）導(dǎo)入它。

前端設(shè)定

<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
  <label>name:
    <input [(ngModel)]="hero.name" placeholder="name">
  </label>
</div>

把組件綁定在主頁(yè)面上

<h1>{{title}}</h1>
<app-heroes></app-heroes>

雙向綁定

<div>
  <label>name:
    <input [(ngModel)]="hero.name" placeholder="name">
  </label>
</div>

[(ngModel)] 是 Angular 的雙向數(shù)據(jù)綁定語(yǔ)法。
這里把 hero.name 屬性綁定到了 HTML 的 textbox 元素上，以便數(shù)據(jù)流可以雙向流動(dòng)：從 hero.name 屬性流動(dòng)到 textbox，并且從 textbox 流回到 hero.name 。
缺少 FormsModule
注意，當(dāng)你加上 [(ngModel)] 之后這個(gè)應(yīng)用無(wú)法工作了。

AppModule
Angular 需要知道如何把應(yīng)用程序的各個(gè)部分組合到一起，以及該應(yīng)用需要哪些其它文件和庫(kù)。 這些信息被稱為元數(shù)據(jù)（metadata）。

有些元數(shù)據(jù)位于 @Component 裝飾器中，你會(huì)把它加到組件類上。 另一些關(guān)鍵性的元數(shù)據(jù)位于 @NgModule 裝飾器中。

最重要的 @NgModule 裝飾器位于頂級(jí)類 AppModule 上。

Angular CLI 在創(chuàng)建項(xiàng)目的時(shí)候就在 src/app/app.module.ts 中生成了一個(gè) AppModule 類。 這里也就是你要添加 FormsModule 的地方。

導(dǎo)入 FormsModule
打開(kāi) AppModule (app.module.ts) 并從 @angular/forms 庫(kù)中導(dǎo)入 FormsModule 符號(hào)。
然后把 FormsModule 添加到 @NgModule 元數(shù)據(jù)的 imports 數(shù)組中，這里是該應(yīng)用所需外部模塊的列表。

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
imports: [
  BrowserModule,
  FormsModule
],

每個(gè)組件都必須聲明在一個(gè)Ngodule中

在 src/app/app.module.ts 中
import { HeroesComponent } from './heroes/heroes.component';
declarations[  AppComponent,  HeroesComponent  ],

數(shù)組相關(guān)

定義數(shù)組

import { Hero } from './hero';

export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

給一個(gè)組件添加該數(shù)組元素

import { HEROES } from '../mock-heroes';

export class HeroesComponent implements OnInit {
  heroes = HEROES;

前端循環(huán)輸出

<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
//循環(huán)輸出，let of 顯示元素，數(shù)組元素
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
//綁定事件，事件方法也在組件ts中編寫(xiě)
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<div *ngIf="selectedHero">

  <h2>{{selectedHero.name | uppercase}} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name">
    </label>
  </div>

</div>

主從組件

一個(gè)組件依從另外一個(gè)組件
從件中導(dǎo)入

import { Hero } from '../hero';
import { Component, OnInit, Input } from '@angular/core';
@Input() hero: Hero;

在主件中顯示從件

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

服務(wù)