angular重要幾點：
（1）模板及資料繫結
雙向繫結提供[(ngModule)]
html屬性繫結：
.someExpression替換.aaa .bbb/isSpecial是一個bool值/
1.元件：元件可以有自己的屬性
元件生命週期鉤子：
參照angular官網：
ngOnChanges():父元件是在初始化或修改子元件的輸入引數時變化。
變更檢測與DoCheck鉤子：ngDoCheck變化非常頻繁。
viwe鉤子：@ViewChild("child1") child1:childComponent;此時父元件就可以呼叫childComponent裡面的方法；ngAfterViewInit()方法與ngAfterChecked()裡要變更當所有元件封裝完畢後。要在此兩種方法裡改變當前元件檢視繫結的屬性，最好放在一個延遲函式裡。因為當元件組裝完畢後不能改變元件檢視顯示的內容。
ngContent指令（投影）：可以從父元件投影到子元件上。或者[innerHTML]屬性繫結。
元件間的通訊：(@Input是父元件向子元件傳值，@Output是子元件向父元件傳值)
a.EventEmitter物件，既可以發射事件（@Output()）又可以訂閱事件。如類似於(click)。
父子元件互動時，子元件發射事件攜帶資料，父元件通過在其事件繫結方式上來捕獲並處理。
b.中間人模式：（實現鬆耦合）：（兩個子元件通訊）一個子元件是採用EventEmitter發射，另一個@Input接收。
c:中間人（服務）：
d:通過輸入型繫結：
子元件裡@input() name:string ,父元件裡引用子元件，[name]="hero.name",hero.name是父元件的屬性。
e:通過setter截聽輸入值的變化：
@Input()
set name(name: string) {
this._name = (name && name.trim()) || '<no name set>';
}
get name(): string { return this._name; }
同上，父元件裡引用子元件，[name]='hero.name'
f:通過本地變數互動：
把本地變數(#timer)放到(<countdown-timer>)標籤中，用來代表子元件。這樣父元件的模板就得到了子元件的引用，於是可以在父元件的模板中訪 問 子元件的所有屬性和方法。
2.響應式程式設計：[ngModule]可以繫結事件與屬性,用響應式程式設計需要在imports裡匯入：ReactiveFormsModule
3.管道:| 管道修飾符，如my birth:{{birth | date | uppercase}}把birth的日期變為內建date後的樣式,並且字母為大寫。管道就是可以定義某些樣式，比如時間，進位制小數位，等等。建立管道:ng g pipe。
本例中：將變化titleFiter的valueChange變化繫結在元件屬性[formControl]中。然後設定一個關鍵詞，在管道函式裡，傳入//filterField是告訴是要根據商品的標題進行過濾還是價格。。。。 //keyword就是搜尋框中輸入的東西，以及關鍵詞，最後查詢關鍵詞是否在過濾的裡面，要是在就返回該商品，不在就顯示主頁。
（2）依賴注入，控制反轉：比如：服務
@Injectable()決定當前元件可以把別的服務註冊到當前服務裡
注入器：constructor(private productService:ProductService){...}
提供器:provides:[]
@NgModule({
providers:[ProductService],
//帶依賴的類提供商
providers:[{provide:ProductService,useClass:ProductService}],
//備選類提供商（一般用於元件型注入器）
class AnotherProductService implements ProductService,在使用的元件級別@Component裡面再使用：
providers:[{provide:ProductService,useClass:AnotherProductService}],
//別名類提供商
providers:[ NewLogger,
// Alias OldLogger w/ reference to NewLogger
{ provide: OldLogger, useExisting: NewLogger}]
//值提供商
[{ provide: Logger, useValue: silentLogger }]
//工廠提供商：比如不同許可權得到不同的資料
providers:[{provide:ProductService,useFactory:() => {...}}],
})
（3）路由與導航
路由配置：
- const appRoutes: Routes = [
- { path: 'crisis-center', component: CrisisListComponent },
- { path: 'heroes', component: HeroListComponent ,children:[ ]},//子路由，子路由在其父元件配置連結,[routerlink]=['./path']，加個.
- { path: '', redirectTo: '/heroes', pathMatch: 'full' },//重定向路由
- { path: '**', component: PageNotFoundComponent }//頁面不存在
- ];
如何導航：可以在html標籤中使用routerLink='/path'，或者事件處理函式裡使用Router的物件：router.navigate('/path');
傳遞資料：
查詢引數中獲取資料：/path&id=1 --------ActivitedRoute.queryParams[id]:
路由路徑中獲取資料：
路由配置中獲取引數：
訂閱者模式：解決互相導航之間的衝突，相對於引數快照
輔助路由：
路由守衛：
CanActive：(處理導航到某路由的情況)
也可以在CanActive<>新增要保護的元件
CanAcitvateChild：保護子路由
CanDeactive:(處理當前路由離開的情況)
resolve守衛：（在路由啟用之前獲取路由資料）
（4）表單：
資料模型：angular/forms模組中特定的類，如FormControl,FormGroup,FormArray組成。模板式表單中，不能直接訪問這些類。
1.模板式表單：適用於一些簡單的場景，資料模型是有angular基於元件模板中的指令隱式建立。#myForm='ngForm';
NgForm:angular自動建立ngForm,如果不讓angular接管表單，則在form標籤上新增ngNoForm。-------FormGroup
NgModel:自動把值新增到表單資料模型上。如果不加方括號中括號，就需要新增name屬性在標籤上，這個name屬性就是myForm.value中的value-------FormControl
NgModelGroup:
2.響應式表單：typescript程式碼建立資料底層模型與html元素連線在一起：module.ts裡引入ReactiveFormsModule。
FormControl:比如每一個表單裡的欄位
FormGroup:每一個分組
FormArray:比如新增
改進：FormBuilder:和上面效果一樣
響應式表單校驗：
/* 自定義 校驗器方法(引數是FormControl或者FormGroup等等，key後面的string就是返回的錯誤資訊)
xxx(control:AbstractControl):{[key:string]:any}{
return null;
}
*/
狀態欄位：
touched和untouched：代表欄位是否獲取過焦點（常用於控制錯誤資訊是否顯示）
pristine和dirty：判斷使用者的值是否被修改過
pending：當一個欄位處於非同步校驗時，pending為true
（5）與伺服器通訊：
httpCleint模組：
傳送GET請求：
當建立HttpParams物件時，通過鏈式語法呼叫set()方法。可以防止物件被修改。
發起一個post請求：
http .post('/api/developers/add', body) // See below - subscribe() is still necessary when using post(). .subscribe(...);//subscribe()才會發起請求，在這之前什麼也不會發生
攔截器：
要做操作：如果重新設定請求頭，需要將req.clone()。其他操作：next.handle(req).do('相應操作')// RxJS 的 do()操作符 —— 它為可觀察物件新增一個副作用，而不會影響到流中的值。
在typescript用jquery與bootstrap需要裝轉換：
npm install @types/jquery --save-dev
npm install @types/bootstrap --save-dev
踩坑之旅：
1.需設定為全域性樣式，可以在component中新增 encapsulation: ViewEncapsulation.None。
2.服務裡獲取資料之後需要處理資料，最好非同步完成。要麼增加回撥，要麼用new Promise，
3.官網中路由跳轉 this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);這種方式可選的路由引數沒有使用“？”和“&”符號分隔，因為它們將用在URL查詢字串中。 它們是用“;”分隔的。 如果要使用？或者&，可以使用this.router.navigateByUrl('/heroes?id=5');或者像前面的方式，後面引數（['/heroes'],{queryParams:{id:5}}）:這是以?號結尾的。
4.Angular 的安全導航操作符 (?.) 是一種流暢而便利的方式，用來保護出現在屬性路徑中 null 和 undefined 值。
5.動態元件：
6.angular沒有的標籤，需要使用插值表示式，需要在屬性前加attr.
7.{{ obj_expression | async }這個async管道監聽當前Observable或者Promise 發出的最新值。