Angular筆記

組件

結構

import {...} from ...;
/*註解,告訴編譯器加載內容*/
@Component({
    selector:'...',//標籤名
    template:'...',//組件模板,使用url加載或直接寫;插值綁定：變量聲明使用{{...}}:
      //或者：templateUrl: './hero-detail.component.html',
      //styleUrls: ['./hero-detail.component.css'],
    ...
    })

export class AppComponent {
    name='...';屬性
}

根組件的聲明

//通過 [root] = 組件變量，聲明根組件
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

模板（template）

<input [(ngModel)]="hero.name" placeholder="name">//雙向綁定數據

/*利用循環，顯示數據，let .. of ..的語法*/
<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

/*事件綁定 (...事件)="函數"*/
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

/*if語句 *ngIf="變量"*/
<div *ngIf="selectedHero">
...
</div>

/*css樣式;利用[class.selected]=true|false來控制移除和添加*/
<li *ngFor="let hero of heroes"
  [class.selected]="hero === selectedHero"
  (click)="onSelect(hero)">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

/*變量綁定，將數據傳到子組件*/
<hero-detail [hero]="selectedHero"></hero-detail>
/*綁定到的目標屬性必須是一個輸入屬性，否則Angular會拒絕綁定，並拋出一個錯誤。*/
@Input() hero: Hero;

服務

獲取數據，方便所有的組件共享數據

//初始化
import { Injectable } from '@angular/core';

@Injectable()
export class HeroService {
}

路由

//導入模塊
import { RouterModule }   from '@angular/router';
//加載
@NgModule({
imports: [
   ...
    RouterModule.forRoot([
      {
        path: 'heroes',
        component: HeroesComponent
      }
    ])
  ],
  ...
})

//添加標籤
template: `
   <h1>{{title}}</h1>
   <a routerLink="/heroes">Heroes</a>
   <router-outlet></router-outlet>
 `

數據綁定

<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>

• {{hero.name}}插值表達式在 li 標籤中顯示組件的hero.name屬性的值。
• [hero]屬性綁定把父組件HeroListComponent的selectedHero的值傳到子組件HeroDetailComponent的hero屬性中。

• (click) 事件綁定在用戶點擊英雄的名字時調用組件的selectHero方法。

• 雙向數據綁定是重要的第四種綁定形式，它使用ngModel指令組合了屬性綁定和事件綁定的功能。 下面是HeroDetailComponent模板的範例：

<input [(ngModel)]="hero.name">

鍵盤、鼠標事件

模板引用變量，使用 #name ，來標記當前標籤爲變量

@Component({
  selector: 'little-tour',
  template: `
    <input #newHero
      (keyup.enter)="addHero(newHero.value)"
      (blur)="addHero(newHero.value); newHero.value='' ">

    <button (click)="addHero(newHero.value)">Add</button>

    <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul>
  `
})
export class LittleTourComponent {
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  addHero(newHero: string) {
    if (newHero) {
      this.heroes.push(newHero);
    }
  }
}

通過 ngModel 跟蹤修改狀態與有效性驗證

狀態	爲真時的 CSS 類	爲假時的 CSS 類
控件被訪問過。	ng-touched	ng-untouched
控件的值變化了。	ng-dirty	ng-pristine
控件的值有效。	ng-valid	ng-invalid