摘要：最近在看，隨手記的一些的隨筆。新上手或者準(zhǔn)備學(xué)的可以用作參考，第一次寫(xiě)博客，筆記不算完整，若老司機(jī)發(fā)現(xiàn)有不足指出請(qǐng)指出。處理當(dāng)前路由離開(kāi)的情況。在路由激活之前獲取路由數(shù)據(jù)。

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

新上手或者準(zhǔn)備學(xué)angular的可以用作參考，第一次寫(xiě)博客，筆記不算完整，若老司機(jī)發(fā)現(xiàn)有不足指出請(qǐng)指出。

技術(shù)交流群：513590751

組件
是Angular應(yīng)用的基本構(gòu)件塊、可以把一個(gè)組件理解為一段帶有業(yè)務(wù)邏輯和數(shù)據(jù)的html

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

模塊

用來(lái)將應(yīng)用中不同的部分組成一個(gè)Angular框架可以理解的單元

服務(wù)

用來(lái)封裝可重用的業(yè)務(wù)邏輯

#varName

用來(lái)元數(shù)據(jù)附加到typescript的類上面 從而讓angular把這個(gè)類識(shí)別為組件

## selecter:css的選擇器，標(biāo)志可以根據(jù)該選擇器作為html標(biāo)簽

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

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

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

包含與模版相關(guān)的所有的屬性與方法

與頁(yè)面相關(guān)的大部分邏輯都是編寫(xiě)在控制器里面

用@NgModule裝飾器生成一個(gè)模塊

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

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

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

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

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

創(chuàng)建：ng new my-app

啟動(dòng)：ng serve [--open]

    --open：在瀏覽器打開(kāi)
    
    --routing：生成一個(gè)帶route的項(xiàng)目
    
生成組件：ng g component [componentName]
生成服務(wù)：ng g service [serviceName]
生成管道：ng g pipe [pipeName]
生成指令：ng g directive [directiveName]
    

path：路由URL

component：路由對(duì)應(yīng)的組件

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

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

redirectTo：重定向的URL

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

loadChildren：延遲加載

canActivate：[class]    //此處調(diào)用的類需要在providers里面聲明，該類實(shí)現(xiàn)了CanActivate類 implements CanActivate

canDeactivate：[class]  //此處調(diào)用的類需要在providers里面聲明，該類實(shí)現(xiàn)了CanDeactivate類 implements CanDeactivate

resolve：{param1:value1,params2:value2}    //此處調(diào)用的類需要在providers里面聲明，該類實(shí)現(xiàn)了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() {
        // 訂閱方式 如果會(huì)有組件調(diào)用本身的情況就使用訂閱方式
        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：處理導(dǎo)航到某路由的情況。

CanDeactivate：處理當(dāng)前路由離開(kāi)的情況。

Resolve：在路由激活之前獲取路由數(shù)據(jù)。

在providers中注冊(cè)接口

在需要引用的類的構(gòu)造方法的參數(shù)中注入

constructor(private params1:Params){}

當(dāng)使用同一個(gè)接口不同的實(shí)現(xiàn)類時(shí)，在providers中聲明providers: [{
    provide: Params,
    useClass: AnotherParams
}]

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

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

{{productTitle}}

綁定事件

dom屬性

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

html屬性

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

這種方式會(huì)替換原class屬性的值
這種方式不會(huì)替換原class屬性的值
這種方式可以控制多個(gè)屬性的顯示

雙向數(shù)據(jù)綁定

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

在項(xiàng)目中生成一個(gè)管道，然后在管道類的transform方法中對(duì)值進(jìn)行操作。

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

1、在項(xiàng)目模塊中引入ReactiveFormsModule模塊

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

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

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

輸入屬性

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

輸出屬性

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

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

在父組件引用子組件的標(biāo)簽上用事件訂閱來(lái)訂閱自組建發(fā)射的事件
用
// 監(jiān)控的事件名 prop 和@Output中的參數(shù)一致，不傳參時(shí)默認(rèn)和屬性名一致

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

兩個(gè)子組件，通過(guò)@Output數(shù)據(jù)到父組件和@Input從父組件接收數(shù)據(jù)來(lái)實(shí)現(xiàn)組件間通訊，父組件為中間人

組件鉤子：

想要使用這些鉤子，需要先實(shí)現(xiàn)對(duì)應(yīng)的接口

被調(diào)用一次的鉤子
    
    constructor（組件構(gòu)造方法，調(diào)用該方法時(shí)，組件的輸入屬性沒(méi)有值）
    
    ngOnInit（初始化組件或指令，調(diào)用該方法時(shí)，OnChanges方法已被調(diào)用，組件的輸入屬性有值）
    
    ngAfterContentInit（和angular的內(nèi)容投影相關(guān)的）
    
    ngAfterViewInit（和angular的視圖初始化和檢查相關(guān)的,在此方法不可修改組件的屬性）
    
    ngOnDestroy（組件銷(xiāo)毀，在路由到其他組件時(shí)當(dāng)前組件被銷(xiāo)毀）
    
被調(diào)用多次的鉤子
    
    ngOnChanges（父組件初始化或修改子組件的輸入屬性的值的時(shí)候被調(diào)用，如果一個(gè)方法沒(méi)有輸入屬性，則該方法不會(huì)被調(diào)用）
    
    ngDoCheck（用來(lái)檢測(cè)，在每個(gè)angular的變更檢測(cè)周期調(diào)用）
    
    ngAfterContentChecked（和angular的內(nèi)容投影相關(guān)的）
    
    ngAfterViewChecked（和angular的視圖初始化和檢查相關(guān)的,在此方法不可修改組件的屬性）

調(diào)用順序：
    
    constructor、ngOnChanges、ngOnInit、ngDoCheck、ngAfterContentInit、ngAfterContentChecked、ngAfterViewInit、ngAfterViewChecked、ngAfterContentChecked、ngAfterViewChecked

父組件調(diào)用子組件的方法

#在父組件的模塊中調(diào)用子組件的方法

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

#在父組件的模版中調(diào)用子組件的方法

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

#父組件

    
        
這是頭部
        
這是底部
    


#子組件

    
    


定義單個(gè)投影點(diǎn)時(shí)可以不寫(xiě)class屬性和select屬性

表單的數(shù)據(jù)模型是通過(guò)組件模版中的相關(guān)指令來(lái)定義的，因?yàn)槭褂眠@種方式定義表單的數(shù)據(jù)模型時(shí)，我們會(huì)受限與HTML的語(yǔ)法，所以，末班驅(qū)動(dòng)方式只是用于一些簡(jiǎn)單的場(chǎng)景

NgForm

NgModel

NgModelGroup

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

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

使用響應(yīng)式表單時(shí)，通過(guò)編寫(xiě)TypeScrtipt代碼而不是HTML代碼來(lái)創(chuàng)建一個(gè)底層的數(shù)據(jù)模型，在這個(gè)模型定義好以后，使用一些特定的指令，將模版上的HTML元素與底層的數(shù)據(jù)模型連接在一起

FormControl

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

FormGroup

FormGroup是多個(gè)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], // 第二個(gè)參數(shù)是校驗(yàn)器，可以傳一個(gè)數(shù)組，第三個(gè)參數(shù)是異步校驗(yàn)器
        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;  // 獲取字段是否通過(guò)驗(yàn)證
    let error:any = this.formModel.get("username").errors;  //獲取字段未通過(guò)驗(yàn)證的錯(cuò)誤信息
    this.formModel.valid; // 用來(lái)判斷表單是否合法
}

異步校驗(yàn)器作為字段構(gòu)造的第三個(gè)參數(shù)傳入
funcName(control: AbstractControl) {[key: string]: any} {
    // 返回的對(duì)象用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)獲取數(shù)據(jù)，并且用.map(res => res.json())把獲取到的數(shù)據(jù)轉(zhuǎn)換成json格式
    
    4、用Observable類型的變量接收數(shù)據(jù)
    
    5、訂閱Observable類型的變量，并且用obs.subscribe(data => this.product = data)來(lái)賦值給變量
    
proxy.conf.json配置
    // 意指當(dāng)前請(qǐng)求是以/api開(kāi)頭時(shí)，把請(qǐng)求轉(zhuǎn)發(fā)到http://loacalhost:8000
    {
        "/api": {
            "target": "http://loacalhost:8000"
        }
    }
    // 在package.json中配置
    ng serve 命令添加參數(shù) --proxy-config proxy.conf.json
    

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

@Injectable()
export class WebSocketService {

    ws: WebSocket;

    constructor() {
    }
    
    // 根據(jù)傳入的url創(chuàng)建一個(gè)websocket協(xié)議
    createObservableScoket(url: string): Observable {
        // 創(chuàng)建websocket服務(wù)
        this.ws = new WebSocket(url);
        return new Observable(observer => {
            // 返回成功時(shí)執(zhí)行的方法
            this.ws.onmessage = event => observer.next(event.data);
            // 返回錯(cuò)誤時(shí)執(zhí)行的方法
            this.ws.onerror = event => observer.error(event);
            // 關(guān)閉websocket流時(shí)執(zhí)行的方法
            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已結(jié)束！")
        );
    }

}