關鍵字：提供商(providers)、指令結構寫法、抽象類Validatorjavascript

下面經過自定義表單驗證器代碼拆分講解html

const UUID_VALIDATOR: any = {
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => UUIDValidator),
  multi: true
};

@Directive({
  selector: '[uuid][formControlName],[uuid][formControl],[uuid][ngModel]',
  providers: [UUID_VALIDATOR]
})
export class UUIDValidator implements Validator, OnInit, OnChanges {
  @Input() uuid;

  private validator: ValidatorFn;
  private onChange: () => void;

  ngOnInit() {
    this.validator = uuid(this.uuid);
  }

  ngOnChanges(changes: SimpleChanges) {
    for (const key in changes) {
      if (key === 'uuid') {
        this.validator = uuid(changes[key].currentValue);
        if (this.onChange) {
          this.onChange();
        }
      }
    }
  }

  validate(c: AbstractControl): {[key: string]: any} {
    return this.validator(c);
  }

  registerOnValidatorChange(fn: () => void): void {
    this.onChange = fn;
  }
}

週日補充java

Forward Referencelinux

自定義驗證指令 @Attribute() 指令擴展用法

掌握Angular2的依賴注入 useExisting useClass usevale等別名注入

Angular 2 Multi Providerssegmentfault

Angular2 依賴注入之實例化過程windows

[][]估計是要都存在的狀況下指令才生效緩存

關鍵字：aot編譯報錯、linux網絡

這是window下aot編譯angular項目（ng build）出現的警告，警告事後仍能夠正常打包。app

公司運維在linux環境經過jenkies工具自動化打包這個警告就變成報錯，緣由是linux嚴格區分大小寫，而windows不區分。運維

出現這種狀況是由於對於第三方的UI庫進行擴展的時候，把文件直接拷貝出來進行修改，一旦UI庫維護更新了文件名稱如大小變成小寫，拷貝的代碼仍是大寫路徑。

關鍵字：路由複用

項目遇到一種需求，表格數據量大的時候在表格內部確定會出現滾動條，如今想在切換路由的時候保證表格內部滾動條原封不動的在那個位置。目前想到的僅僅是識別內部距頂位置做爲記錄，每次切換再滾動一遍。

先說說路由複用解決的問題：

後臺系統本質是解決不一樣路由頁切換時組件數據不丟失問題（減小網絡請求）
入場動畫或路由動畫不會屢次觸發（組件及其狀態經過路由快照被保存起來，組件不會再次實例化/初始化，生命週期也不會從新觸發）
符合tab頁組件的切換

一句話歸納，angular經過路由策略使用<router-outlet>做爲容器加載/渲染不一樣的頁面組件，此處的組件應該是一個ng-template的殼裝載，經過路由複用策略五個方法（抽象類）去進行路由複用，替換->緩存->重用就是總體的核心了

五個方法

shouldDetach 直接返回 true 表示對全部路由容許複用
store 當路由離開時會觸發。按path做爲key存儲路由快照&組件當前實例對象；path等同RouterModule.forRoot中的配置。
shouldAttach 若 path 在緩存中有的都認爲容許還原路由
retrieve 從緩存中獲取快照，若無則返回null
shouldReuseRoute 進入路由觸發，判斷是否同一路由

angular路由複用組件參考ng-alain

關鍵字：模塊預加載(PreloadingStrategy)的控制和實現(https://blog.csdn.net/happykala/article/details/77945000)

(1)preloadingStrategy: PreloadAllModules——使用angular內置的加載策略一次性預加載全部的模塊，也就是對應的工廠函數文件，以便於跳轉到指定模塊會實例化對應的組件

(2)自定義預加載策略（自行在路由配置那些須要預加載），無預加載的模塊會在進入的時候纔會加載，提升首次進入的速度

import {Route,PreloadingStrategy } from '@angular/router';
import { Observable } from 'rxjs';
import 'rxjs/add/observable/of';
/**
 * 自定義的路由加載策略，在定義中定義data其中的屬性preload爲真的時候這個模塊蔡須要被預先加載
 */
export class CustomPreloadingStrategy implements PreloadingStrategy{
    preload(route: Route, fn: () => Observable<any>): Observable<any>{
        return route.data&&route.data.preload?fn():Observable.of(null);
    }
}

Angular平常記錄（會用還不夠，關鍵理解）

自定義驗證指令 @Attribute() 指令擴展用法

掌握Angular2的依賴注入 useExisting useClass usevale等別名注入