Angular上路—基礎知識—組件與模板（顯示數據）

組件類和模板共同構成了應用數據的一個視圖。
數據綁定：頁面上把數據的值及其表現形式組合起來的過程。
經過指令向模板中添加邏輯，指令告訴Angular在渲染頁面時要如何修改。
本文問題：模板語法的工做方式？

插值顯示組件屬性

顯示組件屬性最簡單的方式：插值綁定屬性名。{{myHello}}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',  // 指定當前組件的Css選擇器，對應<app-root>元素，該元素是inde.html文件裏的一個佔位符。
  template: `
  <h1>{{title}}</h1>
  <h2>My favorite hero is: {{myHero}}</h2>
  `
})
export class AppComponent {
  title = 'Tour of Heroes';
  myHero = 'Windstorm'
}
複製代碼

Angular 自動從組件中提取 title和myHero 屬性的值，並將其插入瀏覽器中。當這些屬性發生變化時，Angular就會自動刷新顯示。

模板是包在 ECMAScript 2015 反引號 ( ` ) 中的一個多行字符串。 反引號 ( ` ) — 注意，不是單引號 (') — 容許把一個字符串寫在多行上， 使 HTML 模板更容易閱讀。

流程：AppComponent類啓動，在index.html文件中查找 元素，而後實例化AppComponent,將其渲染到標籤中。

選擇模板來源

@Component()元數據告訴Angular要到哪裏去找該組件的模板。有兩種方式存放組件模板：

• template 定義內聯模板，用於小型示例或測試
• templateUrl屬性指向單獨的HTML文件，比小型測試或示例更復雜的場景

初始化

使用變量賦值對組件進行初始化；或使用構造函數。

export class AppComponent {
  title = 'Tour of Heroes';  //變量賦值方式
  myHero = 'WebStrom';
  constructor(){
    this.title = 'New Title'; // 構造函數方式
    this.myHero = 'NewHero';
  }
}
複製代碼

循環遍歷數據

*ngFor 指令循環遍歷數據

<ul>
    // hero 是一個 模板輸入變量
    <li *ngFor="let hero of heros">
        {{hero}}
    </li>
</ul>
複製代碼

建立類封裝應用數據

組件內部直接定義數據，不是最佳實踐；應當將數據封裝到對象中（面向對象思惟）
建立一個類 ng generate class hero

export class Hero { // 自動將類名首字母大寫了
// 構造函數中的參數，默認添加了 private id: number  和 this.number = number;
// 這種方式利用了TypeScript 提供的簡寫形式----用構造函數的參數直接定義屬性。
  constructor( // 手動添加構造函數
    public id: number, // 聲明id類型爲 數字類型
    public name: string) // 聲明name 爲字符類型
    { }
}
複製代碼

NgIf條件顯示

Angular 的ngIf 指令會根據一個布爾條件來顯示或移除一個元素 <p *ngIf="heroes.length > 3">There are many heroes!</p>
Angular 不是在顯示和隱藏這條消息，它是從DOM 中添加和移除這個段落元素。這會提升性能，特別是在一些大的項目中有條件的包含或排除一大堆帶着不少數據綁定的HTML時。

解答：模板語法的工做方式？

1. 雙花括號的插值
2. ngFor顯示數組
3. ngIf 條件展現
4. 生成class文件定義數據類型，面向對象的思想封裝數據

要點：

1. @Component元數據中模板的兩種聲明方式，template和templateUrl
2. typeScript語法簡寫：經過構造函數的參數聲明並賦值一個成員變量