摘要：最近在看，隨手記的一些的隨筆。新上手或者準備學的可以用作參考，第一次寫博客，筆記不算完整，若老司機發現有不足指出請指出。處理當前路由離開的情況。在路由激活之前獲取路由數據。

最近在看angular4，隨手記的一些angular的隨筆。

新上手或者準備學angular的可以用作參考，第一次寫博客，筆記不算完整，若老司機發現有不足指出請指出。

技術交流群：513590751

組件
是Angular應用的基本構件塊、可以把一個組件理解為一段帶有業務邏輯和數據的html

指令 詳細指令速查
允許向html添加自定義行為 

模塊

用來將應用中不同的部分組成一個Angular框架可以理解的單元

服務

用來封裝可重用的業務邏輯

#varName

用來元數據附加到typescript的類上面 從而讓angular把這個類識別為組件

## selecter:css的選擇器，標志可以根據該選擇器作為html標簽

## templateUrl:指定了html文件作為組件的模版

## styleUrls:指定了組件模版中的樣式

控制器是指被@component()裝飾的類

包含與模版相關的所有的屬性與方法

與頁面相關的大部分邏輯都是編寫在控制器里面

用@NgModule裝飾器生成一個模塊

## 用declarations聲明了模塊中有什么東西（只能聲明組件、指令和管道）

## 用imports聲明了模塊依賴的其他模塊

## 用providers聲明模塊中提供什么服務（此處只能聲明服務）

## 用bootstrap聲明了模塊的主組件

## 在模塊中聲明服務，在所有組件中都可以使用，在組件中聲明服務，只能在組件中使用（每個想要被注入的服務都需要在服務提供其中聲明）

創建：ng new my-app

啟動：ng serve [--open]

    --open：在瀏覽器打開
    
    --routing：生成一個帶route的項目
    
生成組件：ng g component [componentName]
生成服務：ng g service [serviceName]
生成管道：ng g pipe [pipeName]
生成指令：ng g directive [directiveName]
    

path：路由URL

component：路由對應的組件

    {path:"**",component:Page404Component}   //404頁面，放到所有路由的最后

children：[{path:"aaa",component:AaaComponent}]子路由

redirectTo：重定向的URL

pathMatch：指定匹配方式，匹配path中的 ""，（full完全匹配，prefix匹配前綴）

loadChildren：延遲加載

canActivate：[class]    //此處調用的類需要在providers里面聲明，該類實現了CanActivate類 implements CanActivate

canDeactivate：[class]  //此處調用的類需要在providers里面聲明，該類實現了CanDeactivate類 implements CanDeactivate

resolve：{param1:value1,params2:value2}    //此處調用的類需要在providers里面聲明，該類實現了Resolve類 implements Resolve

傳參：

    方式1：/product?id=1&name=2
    
    方式2：{path:/product/:id}  =>  /product/1
    
    方式3：{path:/product,component:ProductComponent,data:[{flag:true}]}

取值：ActivatedRoute.queryParams[id]    //適用于方式1

      ActivatedRoute.params[id]    //適用于方式2
    
      ActivatedRoute.data[0][flag]  //適用于方式3
      

export class ProductComponent implements OnInit {
    
    private name;

    private id;

    constructor(private activatedRoute: ActivatedRoute) {
    }

    ngOnInit() {
        // 訂閱方式 如果會有組件調用本身的情況就使用訂閱方式
        this.activatedRoute.params.subscribe((params: Params ) => this.id = params["id"] );
        // 快照方式
        this.name = this.activatedRoute.snapshot.queryParams["name"];
        this.id = this.activatedRoute.snapshot.params["id"];
    }
    
}

{path:"xxx",component:XxxComponent,outlet:"aux"}
{path:"yyy",component:YyyComponent,outlet:"aux"}

xxx
yyy

primary：控制主路由

CanActivate：處理導航到某路由的情況。

CanDeactivate：處理當前路由離開的情況。

Resolve：在路由激活之前獲取路由數據。

在providers中注冊接口

在需要引用的類的構造方法的參數中注入

constructor(private params1:Params){}

當使用同一個接口不同的實現類時，在providers中聲明providers: [{
    provide: Params,
    useClass: AnotherParams
}]

使用工廠類確定使用哪個類時，在providers中聲明providers:[{
    provide: Params,
    useFactory: () => { 
        let depClass = new DepClass(); // 此處工廠方法和DepClass類耦合
        let isLogin = Math.random() > 0.5; // 可能還依賴一個外部的變量來判斷需要創建哪個類
        //在這里返回要使用的類型 注意：工廠方法只會在創建第一個需要注入的對象的時候被調用一次 
    }
},DepClass]

// 為工廠方法解耦合
使用deps屬性來聲明工廠方法依賴的類和變量的provide屬性，在providers中聲明providers:[{
    provide: Params, 
    useFactory: (depClass:DepClass,isLogin) => { 
        //在這里返回要使用的類型 
    },
    deps: [DepClass,"IS_LOGIN_ENV"]
},DepClass,{
    provide:"IS_LOGIN_ENV",
    useValue:false
}]
useValue的值可以是基本類型，也可以是對象類型
angular會吧工廠方法依賴的DepClass類注入到工廠方法

{{productTitle}}

綁定事件

dom屬性

事件中使用 event.target.value 獲取的值是html元素的dom屬性（dom屬性的值是會發生變化的）

html屬性

使用 event.target.getAttribute("value") 獲取的值是html元素的初始值（html屬性是不會發生變化的）

這種方式會替換原class屬性的值
這種方式不會替換原class屬性的值
這種方式可以控制多個屬性的顯示

雙向數據綁定

{{name | filter}}
eg:{{birthday | data}}// 將生日轉化成日期格式
eg:{{birthday | data:"yyyy-MM-dd HH:mm:ss"}}// 將生日轉化成指定日期格式

在項目中生成一個管道，然后在管道類的transform方法中對值進行操作。

    export class PipeName implements PipeTransform {
        transform(value: any, arg: any): any {
            // value 是要在管道做處理的值
            // arg 是管道后面跟著的參數
        }
    }

1、在項目模塊中引入ReactiveFormsModule模塊

2、在組件中聲明FormControl類型的字段
    eg:formControlName

3、在頁面中控件上聲明[formControl]="formControlName"

4、在組件中訂閱formControlName的valueChanges事件
    eg:this.formControlName.valueChanges.subscribe(value => this.keyword = value);
    

輸入屬性

在需要注入的屬性上用@Input注解
在父組件中用[propName]="value"來賦值

輸出屬性

在子組件屬性上用@Output解屬性類型為EventEmitter類型
@Output()
prop:EventEmitter = new EventEmitter();
用 prop.emit(dataTypeObj)

在父組件中聲明dataTypeObj:DataType = DataType();//用來存放子組件Output出來的屬性

在父組件引用子組件的標簽上用事件訂閱來訂閱自組建發射的事件
用
// 監控的事件名 prop 和@Output中的參數一致，不傳參時默認和屬性名一致

在父組件中聲明
propHandler(event:DataType){
    // 把子組件Output出來的屬性賦值到父組件的屬性上
    this.dataTypeObj = event;
}

兩個子組件，通過@Output數據到父組件和@Input從父組件接收數據來實現組件間通訊，父組件為中間人

組件鉤子：

想要使用這些鉤子，需要先實現對應的接口

被調用一次的鉤子
    
    constructor（組件構造方法，調用該方法時，組件的輸入屬性沒有值）
    
    ngOnInit（初始化組件或指令，調用該方法時，OnChanges方法已被調用，組件的輸入屬性有值）
    
    ngAfterContentInit（和angular的內容投影相關的）
    
    ngAfterViewInit（和angular的視圖初始化和檢查相關的,在此方法不可修改組件的屬性）
    
    ngOnDestroy（組件銷毀，在路由到其他組件時當前組件被銷毀）
    
被調用多次的鉤子
    
    ngOnChanges（父組件初始化或修改子組件的輸入屬性的值的時候被調用，如果一個方法沒有輸入屬性，則該方法不會被調用）
    
    ngDoCheck（用來檢測，在每個angular的變更檢測周期調用）
    
    ngAfterContentChecked（和angular的內容投影相關的）
    
    ngAfterViewChecked（和angular的視圖初始化和檢查相關的,在此方法不可修改組件的屬性）

調用順序：
    
    constructor、ngOnChanges、ngOnInit、ngDoCheck、ngAfterContentInit、ngAfterContentChecked、ngAfterViewInit、ngAfterViewChecked、ngAfterContentChecked、ngAfterViewChecked

父組件調用子組件的方法

#在父組件的模塊中調用子組件的方法

1、在子組件上聲明模版變量 #childName
2、在父組件中聲明一個類型為 ChildeComponent 的變量 child
3、用 @ViewChild("childName") 注解聲明的變量 child
4、在代碼塊中用 this.child.methodName(args) 來調用子組件的方法

#在父組件的模版中調用子組件的方法

1、在子組件上聲明模版變量 #childName
2、在父組件的模版中綁定事件 (click)="childName.methodName("args")"

#父組件

    
        
這是頭部
        
這是底部
    


#子組件

    
    


定義單個投影點時可以不寫class屬性和select屬性

表單的數據模型是通過組件模版中的相關指令來定義的，因為使用這種方式定義表單的數據模型時，我們會受限與HTML的語法，所以，末班驅動方式只是用于一些簡單的場景

NgForm

NgModel

NgModelGroup

用#myForm來聲明表單的模版變量，在表單的onSubmit="onSubmit(myForm.value,myForm.valid)"來傳入表單的值和表單是否通過驗證

@Directive({
    selecter: "[dirName]", // 在html上作為屬性使用
    providers: [{provide: NG_VALIDATORS, useValue: mobileValidator, multi: true}] // mobileValidator是已經聲明的驗證器
})

使用響應式表單時，通過編寫TypeScrtipt代碼而不是HTML代碼來創建一個底層的數據模型，在這個模型定義好以后，使用一些特定的指令，將模版上的HTML元素與底層的數據模型連接在一起

FormControl

userinfo: FormControl = new FormControl("aaa");

FormGroup

FormGroup是多個FormControl的集合

FormArray

方式一、
formModel: FormGroup = new FormGroup({
    username: new FormControl("初始值"),
    password: new FormControl(),
    email: new FormArray([
        "a",
        "b"
    ])
});

方式二、
constructor(fb: FormBuilder){
    this.formModel = fb.group({
        username: ["初始值", Validators.required], // 第二個參數是校驗器，可以傳一個數組，第三個參數是異步校驗器
        password: [""],
        email: fb.array([
            "a",
            "b"
        ])
    });
}



    
    
    
    
用戶名不能為空
    
    

        
    

funcName(control: AbstractControl) {[key: string]: any} {
    return null;
}

eg:

mobileValidator(control: FormControl) any {
    let valid = true;
    return valid ? null : {mobile : true};
}

constructor(fb: FormBuilder){
    this.formModel = fb.group({
        mobile: ["", this.mobileValidator]
    });
}

onSubmit() {
    let isValid:boolean = this.formModel.get("username").valid;  // 獲取字段是否通過驗證
    let error:any = this.formModel.get("username").errors;  //獲取字段未通過驗證的錯誤信息
    this.formModel.valid; // 用來判斷表單是否合法
}

異步校驗器作為字段構造的第三個參數傳入
funcName(control: AbstractControl) {[key: string]: any} {
    // 返回的對象用Observable.of方法包裹，delay延遲5s
    return Observable.of({}).delay(5000);
}

eg:

mobileAnsycValidator(control: FormControl) any {
    let valid = true;
    return Observable.of(valid ? null : {mobile : true}).delay(5000);
}

constructor(fb: FormBuilder){
    this.formModel = fb.group({
        mobile: ["", this.mobileValidator, this.mobileAnsycValidator]
    });
}

    1、import Http from "@angular/http";
    
    2、在cunstructor方法中注入：cunstructor(http: Http)
    
    3、使用this.http.get("url",data)獲取數據，并且用.map(res => res.json())把獲取到的數據轉換成json格式
    
    4、用Observable類型的變量接收數據
    
    5、訂閱Observable類型的變量，并且用obs.subscribe(data => this.product = data)來賦值給變量
    
proxy.conf.json配置
    // 意指當前請求是以/api開頭時，把請求轉發到http://loacalhost:8000
    {
        "/api": {
            "target": "http://loacalhost:8000"
        }
    }
    // 在package.json中配置
    ng serve 命令添加參數 --proxy-config proxy.conf.json
    

import {Injectable} from "@angular/core";
import {Observable} from "rxjs/Observable";

@Injectable()
export class WebSocketService {

    ws: WebSocket;

    constructor() {
    }
    
    // 根據傳入的url創建一個websocket協議
    createObservableScoket(url: string): Observable {
        // 創建websocket服務
        this.ws = new WebSocket(url);
        return new Observable(observer => {
            // 返回成功時執行的方法
            this.ws.onmessage = event => observer.next(event.data);
            // 返回錯誤時執行的方法
            this.ws.onerror = event => observer.error(event);
            // 關閉websocket流時執行的方法
            this.ws.onclose = event => observer.complete();
        });
    }

    sendMessage(msg: string) {
        this.ws.send(msg);
    }
}

export class SearchComponent implements OnInit {

    constructor(private wsService: WebSocketService) {
    }

    ngOnInit() {
        // 訂閱websocket返回的值
        this.wsService.createObservableScoket("ws://localhost:8085").subscribe(
            data => console.log(data),
            error => console.log(error),
            () => console.log("webSocket已結束！")
        );
    }

}