1.創建名爲heroes的組件。
運行命令：ng generate component heroes
可以看到新的組件已經創建成功，heroes文件夾中，已有四個文件。
heroes.component.css 樣式文件
heroes.component.html 頁面文件
heroes.component.spec.ts 單元測試文件
heroes.component.ts 邏輯文件
這裏的邏輯文件中會默認生成一些結構代碼，我們看下。
@Component 是一個裝飾器函數，它指定組件的Angular元數據。
CLI生成了三個元數據屬性：
selector- 組件的CSS元素選擇器templateUrl- 組件模板文件的位置。- styleUrls- 組件的私有CSS樣式的位置。
-
在CSS元素選擇器，
'app-heroes'是相匹配的標識父組件模板內此組件的HTML元素的名稱。這
ngOnInit是一個生命週期的鉤子。ngOnInit創建組件後不久就會進行Angular調用。
2.進行單向數據綁定【只讀】。
1.首先我們在app.component.html中添加heroes組件。
2.我們在heroes.component.ts 中添加一個屬性heroesName。
3.我們在heroes.component.html 中添加顯示標籤<p></p>。
4.我們在heroes.component.css中，爲<p>標籤加一個樣式吧。
5.運行命令：ng serve --open,效果如下。
3.進行雙向數據綁定【可讀可寫】。
1.這下我們綁定一個對象（類），新創建hero.ts類，進行綁定。
2.我們在heroes.component.ts中引用hero.ts類，並在初始化的時候給它賦值。
3.我在頁面heroes.component.html進行綁定。
uppercase插值綁定中的單詞，在管道運算符（|）之後，激活內置函數UppercasePipe。
管道是格式化字符串，貨幣金額，日期和其他顯示數據的好方法。角船配有多個內置管道，您可以創建自己的管道。
[（ngModel）]是Angular的雙向數據綁定語法。
4.雖然[（ngModel）]是有效的Angular指令，但默認情況下不可用，它屬於可選項FormsModule，必須選擇使用它。
我們打開app.module.ts引用FormsModule。
5.運行命令ng serve --open,效果如下：
