Angular上路—基本概念—組件

組件控制視圖中的一部分區域。在組件的類中定義屬性和方法，經過屬性和方法組成的API與視圖進行交互。

export class HerosComponent implements OnInit {
   heores: Hero[];
  constructor(  // 構造器
  private heroService: HeroService,         //構造器參數型屬性
  private messageService: MessageService
  ) { }
  ngOnInit(): void {
    this.getHeroes();
  }
}
複製代碼

組件元數據

@Component 裝飾器會指出緊隨其後的那個類是個組件類，併爲其指定元數據。 元數據告訴Angular如何獲取它須要的主要構造塊，以建立和展現這個組件及其視圖。
元數據把模板和數據串聯起來。組件和模板共同描述了一個視圖

@Component({
  selector: 'app-heros',
  templateUrl: './heros.component.html',
  styleUrls: ['./heros.component.css'],
  providers: [HeroService]  // 當前組件所需的服務的數組
})
export class HerosComponent implements OnInit {
    ...
}
複製代碼

模板與視圖

經過組件的配套模板定義視圖。模板是HTML，告訴Angular如何渲染組件。
視圖一般會分層次進行組織，能以UI分區或頁面爲單位進行修改、顯示或隱藏。
與組件直接關聯的模板會定義該組件的宿主視圖。
組件能夠定義一個帶層次結構的視圖，包含一些內嵌的視圖做爲其餘組件的宿主。
如何理解「定義一個帶層次結構的視圖」？？

帶層次的視圖能夠包含同一個NgModule中的組件的視圖，頁能夠包含其餘模塊中定義的組件的視圖。

模板語法

<h2>Hero List</h2>

<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>

<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>
複製代碼

• *ngfor 循環語法
• {{hero.name}} 數據綁定
• (click) 事件綁定
• [hero] 屬性綁定
• 子視圖

數據綁定

Angular 支持雙向數據綁定，它是一種對模板中的各個部件和組件中的各個部件進行協調的機制。往模板HTML中添加綁定標記能夠告訴Angular該如何鏈接它們。
上面的數據綁定、事件綁定和子視圖均屬於數據綁定。還有一種就是雙向數據綁定。雙向數據綁定會把屬性綁定和事件綁定組合成一種單獨的寫法。例如：<input [(ngModel)]="hero.name">
數據綁定在模板與組件之間的通信中扮演了很是重要的角色，在父子組件之間的通信業很是重要。

管道

Angular的管道能夠在模板中聲明顯示值的轉化邏輯。帶有@Pipe 裝飾器的類中會定義一個轉換函數，用來把輸入值轉換成供視圖顯示的輸出值。能夠類比VUE中的Filter

• Angular自帶了不少管道， date， uppercase, lowercase,currency等
• 管道操做符號： |

指令

Angular的模板是動態的。當Angular渲染它們的時候，會根據指令給出的指示對DOM進行轉換。
指令：一個帶有@Directive()裝飾器的類

• 組件從技術角度上說是一個指令 但因爲組件對於Angular來講很是獨特、很是重要，所以Angular專門定義了一個@Component()裝飾器，它擴展了@Directive()裝飾器。

• 結構型指令 *ngFor、 *ngIf 等

• 屬性型指令 [ngModel] 等