Angular基礎小知識

1.angular的腳手架的安裝

npm(cnpm) i @angular/cli -g    //安裝腳手架

ng new 項目名   //創建項目(默認會進行npm install)

ng new 項目名 --skip-install  //創建項目但是不安裝依賴 

2.ng添加組件，默認根目錄是在app目錄下

           

ng g component (組建的目錄路徑/)名字  //新增組件 ()裏面表示可選 推薦是components/名字

例子： ng g component components/home //新增home組件，在components目錄下

3.ng定義屬性,ts的語法

4.綁定數據，綁定屬性，綁定html，數據循環，條件判斷，ngClass，ngStyle，事件，管道，本地圖片加載，ngSwitch

(1) <p>{{title}}</p> //數據綁定

(2) <p [title]="innerTitle">測試屬性</p>  //屬性綁定,用[],表示是變量

(3) <p [innerHTML]="htmlStr">綁定html</p>  //html綁定

(4) <span *ngFor="let item of arr; let key=index">{{key}}----{{item}}</span> //數據循環 ngFor  item表示循環的對象，key表示數組的索引 都是自定義的名字

(5) <p *ngIf="flag">條件判斷</p>  //條件判斷, flag爲true就展示, 會刪除dom

(6) <p [hidden]="flag">隱藏</p> //條件判斷, flag爲true表示隱藏，不會刪除dom，類似display:none

(7) <p [ngClass]="{'red': flag, 'blue': !flag}">測試ngClass</p> //ngClass 對樣式進行賦值 格式可以是string,array和object,上面是object例子

(8) <p [ngStyle]="{'color': 'orange', 'font-size': fz }">ngStyle</p> //ngStyle 有''表示是字符串,沒有表示是變量

(9) <button (click)="alertMsg($event)">事件處理</button> //事件用()表示，裏面可以傳事件$event對象

(10) <p>{{ myTime | date: "yyyy-MM-dd HH:mm:ss" }}</p> //管道，類似於filter, date是內部就有的

(11) <img src="assets/images/01.png" alt=""> //本地圖片加載

(12) ngSwitch的操作類似switch語句，status=1時候展示11，status=3展示默認就是33

  <div [ngSwitch]="status">
    <p *ngSwitchCase="status===1">
      11
    </p>
    <p *ngSwitchCase="status===2">
      22
    </p>
    <p *ngSwitchDefault>
      33
    </p>
  </div>

5.雙向綁定，一般用於form表單，要在app.module.ts引入FormsModule，如下圖

<input type="text" [(ngModel)]="userName"> {{userName}}

//使用方法就是[(ngModel)]綁定到變量