angular 4--指令筆記
阿新 • • 發佈：2017-05-29
表達式 子集 sim 管道 聲明 事件綁定 ima 目標 如何
1. Angular 模塊引導
Angular沒有了類似AngularJS中的<body ng-app="my-app">這樣的引導指令了
通過顯示調用 bootstrap 函數，並傳入應用模塊的名字( AppComponent)來啟動應用。
import { NgModule } from [email protected]/core‘;
import { BrowserModule } from [email protected]/platform-browser‘;
import { AppComponent } from
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]}) export class AppModule { }
NgModule是一個裝飾器函數，它接收一個用來描述模塊屬性的元數據對象。其中最重要的屬性是：
-
declarations- 聲明本模塊中擁有的視圖類。Angular 有三種視圖類：組件、指令和管道。 -
exports- declarations 的子集，可用於其它模塊的組件模板。 -
imports- 將js引入的素材模塊或者組件模塊等，進行angular模塊化引用。 -
providers- 服務的創建者，並加入到全局服務列表中，可用於應用任何部分。 -
bootstrap- 指定應用的主視圖（稱為根組件），它是所有其它視圖的宿主。只有根模塊才能設置bootstrap屬性。
2.ngClass 表達式包含/排除css類
<div [ngClass]="{active: isActive}"> // 例子1
<div [ngClass]="{active: isActive,
shazam: isImportant}
<div [class.active]="isActive"> // 例子3
在第一個例子中，如果isActive為真，則active類被應用到那個元素上。
還可以同時指定多個類，例如第二個例子。
Angular還有類綁定，它是單獨添加或移除一個類的好辦法，就像第三個例子中展示的。
3.click 事件
<button (click)="toggleImage()"> // 例子1
<button (click)="toggleImage($event)"> // 例子2
Angular中要使用事件綁定，把目標事件的名字放在圓括號中，並且使用等號右側引號中的模板語句對它賦值。 然後Angular為這個目標時間設置事件處理器。當事件被觸發時，這個處理器就會執行模板語句。
在第一個例子中，當用戶點擊此按鈕時，相關組件中的toggleImage()方法就被執行了。
第二個例子演示了如何傳入$event對象，它為組件提供了此事件的詳情。
4.Component裝飾器
@Component({ selector: ‘movie-list‘, templateUrl: ‘./movie-list.component.html‘, styleUrls: [ ‘./movie-list.component.css‘ ], })
angular 4--指令筆記