腳手架：https://github.com/AngularClass/angular-starter

npm下載外掛失敗的解決方法： 1)用yarn安裝下載失敗的外掛，先npm -i yarn安裝yarn   2）使用cnpm，參考https://cnpmjs.org/ ,命令幾乎全部和npm一致，只是以cnpm代替了npm 3)

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

改回去的話 npm config set registry http://registry.npmjs.org

需要掌握的知識點

TypeScript  https://www.tslang.cn/docs/home.html

Rxjs  http://reactivex.io/rxjs/  專案中用到的主要是Subject作為observable subscribe unsubscribe，flatMap,以及combineLatest

Immutable.js 

Webpack（前期腳手架框架已經配置好了，不需要學習掌握）

Angular2 

從Angular1轉Angular2要注意的一些點，html的表示式中|| &&等左右一定要留空格

*ngFor="let item of array"

*ngIf

(click)=

(dblclick)= 雙擊，但是會觸發(click)事件，如果要同時click和double click處理不同的事件，建議用click的時間間隔來實現double click

(blur)= (focus)=

[hidden]=

[(ngModel)]= 雙向繫結的括號不能少   但也可以用[ngModel] + (ngModelChange)來實現雙向繫結

父子控制元件相互通訊， 子控制元件@Input()註解變數接受父檢視的變數，@OutPut() EventEmiiter將值和事件傳遞給父控制元件

父元件中： 
< child-item [namestr] = “fatherItemName”(childEvent)="fatherFunction(event)"  #child> 
@ViewChild(ChildComponent) child: ChildComponent; //另外一種父檢視訪問子控制元件的方式

child.nativeElement就相當於頁面上的元素
子元件
@Input() namestr
@Output() childEvent = new EventEmitter<boolean>();
childEvent.emit(Object)

有很多的Angular2元件   https://github.com/AngularClass/awesome-angular

專案中用到的有：ng2-paginator分頁元件

一些程式碼

在通用服務common-data-service中

public myNoticeSource = new Subject<any>();
public myNoticeSource$ = this.myNoticeSource.asObservable();

 public myNotice(data) {
    this.myNoticeSource.next(data);
 }

在頁面中

public mySub: any;
public ngOnInit() {
this.mySub = this.cds.myNoticeSource$.subscribe((data) => {
     ...
    });
}
public ngOnDestroy() {
  this.mySub.unsubscribe();
}

一些思路

需求：路徑引數變更重新整理頁面內容

思路一，監聽路由資料

 this.router.events
      .filter(event => event instanceof NavigationEnd)
      .map(() => this.route) // 將filter處理後的Observable再次處理
      .subscribe((event) => {
        this.projectType = this.route.snapshot.params.projectType;
        ...清空資料
        ...請求資料1
        ...請求資料2
      });

思路二，用官網的switchMap，按照官網的說法是這種寫法有一個好處就是如果引數變更以後上一次的請求如果沒有結束會被取消

this.route.params
      .switchMap((params: Params) => {
        this.projectType = +params['projectType'];
        ...清空資料

        return Observable.combineLatest(
            ...api1,
            ...api2
        );
      }).subscribe((res) => {
        if (res[0].meta.code === 200) {
          ...api1資料處理
        } else {
          this.cs.responseErrorHandler(res[0], false, this.router);
        }
        if (res[1].meta.code === 200) {
          ...api2資料處理
        } else {
          this.cs.responseErrorHandler(res[1], false, this.router);
        }
      });

需求：子控制元件失焦後關閉

思路一：讓子控制元件的最外層div聚焦，然後在子控制元件最外層div上(blur)="active=false"

思路二：監聽全域性點選事件，如果target不是子控制元件中的任何一個元素，則active=false

import { Component, Input, Output, EventEmitter, OnInit, HostListener, ElementRef } from '@angular/core';
  @HostListener('document:click', ['$event']) handleClick(event: Event) {
    if (!this.el.nativeElement.contains(event.target)) {
      this.active = false;
    }
  }

遇到過的問題

1）hashingTypeError: Data must be a string or a buffer

新寫了一個模組，叫做應用服務，我取名ApplicationServiceModule和ApplicationServiceComponent，編譯一直報錯通過不了，網上有人說在index.ts中使用 export * from 來替代 export {moduleName} from的寫法，但是解決不了我的問題，最後重新命名為AppServiceModule和AppServiceComponent問題解決了，但是angular元件中也沒有看到哪裡有ApplicationServiceModule只有一個ApplicationModule，總之感覺怪怪的