angular4

可可西里發表於2018-04-04
Angular

元件互動方式

  1. 通過輸入型繫結把資料從父元件傳到子元件 @input裝飾器是從父元件中傳遞過來的屬性傳遞到子元件中，即@input寫在了子元件裡面
  2. 通過setter監測輸入屬性值發生的變化

angular4

angular4
3. ngOnChanges() 方法來監測輸入屬性值的變化 4. JSON.stringify() 方法是將一個JavaScript值(物件或者陣列)轉換為一個 JSON字串 5. @output輸出的 子元件中寫@Output() onVoted = new EventEmitter();父元件中定義onvoted方法 父元件 VoteTakerComponent 繫結了一個事件處理器(onVoted())，用來響應子元件的事件($event)並更新一個計數器。 6. <app-countdown-timer #timer> 利用本地變數#timer繫結到子元件中，就可以在父元件中呼叫子元件的方法。但是這個方法有侷限性，這個父元件-子元件的連線必須全部在父元件的模板中進行，父元件本身的程式碼對子元件沒有訪問權。 如果想要在父元件的類中呼叫子元件的方法，就只能通過@viewchild將子元件注入到父元件裡面。

angular4

angular雙向資料繫結原理

angular雙向資料繫結原理 從UI到資料：UI事件，ajax請求，timeout等。 從資料到UI：髒檢查

angular4
angular4
angular4

學習

  1. 駝峰法則建立模板
  2. prefix 是給元件的字首；
  3. #heroInput 只能在模板本身作用域內使用，在類內是無法引用的
  4. 日期管道 date:'yyyy-MM-dd HH:mm:ss'
  5. ngModule在input上使用時，必須要加入formsModule使用
  6. JSON.stringify() 方法是將一個JavaScript值(物件或者陣列)轉換為一個 JSON字串，如果指定了replacer是一個函式，則可以替換值，或者如果指定了replacer是一個陣列，可選的僅包括指定的屬性。

7.JSON.parse() 方法用來解析JSON字串，構造由字串描述的JavaScript值或物件。提供可選的reviver函式用以在返回之前對所得到的物件執行變換(操作)。

angular4

  1. 泛型

T[]表示T型別的陣列

    function loggingIdentity(arg: T[]): T[] {
        console.log(arg.length);  // Array has a .length, so no more error
        return arg;
    }

我們在類那節說過，類有兩部分：靜態部分和例項部分。 泛型類指的是例項部分的型別，所以類的靜態屬性不能使用這個泛型型別。

泛型約束:可以利用介面的方式來進行 number是沒有length這個屬性的

    interface Lengthwise {
        length: number;
    }
    function loggingIdentity(arg: T): T {
        console.log(arg.length);  // Now we know it has a .length property, so no more error
        return arg;
    }
    loggingIdentity(3);  // Error, number doesn't have a .length property
    loggingIdentity({length: 10, value: 3});

9.angular的規範：最外層的html必須是class="container"

10.指令和元件的例項有一個生命週期：新建、更新和銷燬。 通過實現一個或多個 Angular core 庫裡定義的生命週期鉤子介面，開發者可以介入該生命週期中的這些關鍵時刻。 10. ngOnChanges 每次@input資料更改的時候呼叫， ngOnInit只呼叫一次 11. ngDoCheck檢測，並在發生 Angular 無法或不願意自己檢測的變化時作出反應。在每個 Angular 髒檢查，變更檢查 變更檢測週期中呼叫，ngOnChanges() 和 ngOnInit() 之後。
12. ngAfterContentInit 在內容投影進元件以後呼叫，在第一次ngDoCheck後呼叫，只呼叫一次 13. ngAfterContentChecked 內容投射完以後呼叫，每次ngDoCheck以後都要呼叫 14. ngAfterViewInit 初始化完元件檢視及子檢視後呼叫，第一次ngAfterContentChecked完以後呼叫，只呼叫一次 15. ngAfterViewChecked 每次做完元件檢視和子檢視的變更檢測之後呼叫, ngAfterViewInit() 和每次 ngAfterContentChecked() 之後呼叫。 16. ngOnDestroy()當 Angular 每次銷燬指令/元件之前呼叫並清掃。 在這兒反訂閱可觀察物件和分離事件處理器，以防記憶體洩漏。 在 Angular 銷燬指令/元件之前呼叫。只呼叫一次

angular4
17. ngOnChanges是不執行可變值的（例如物件）,物件屬性的改變是在ngDoCheck中執行的

ngDoCheck的特性

  1. 沒發生一次變更檢測就會被呼叫一次
  2. 誰在負責觸發變更？（Zones,它攔截了所有的回撥：定時器、事件、ajax）攔截以後去通知angular去做變更檢查
  3. 不要在鉤子中寫負責的邏輯

js的所有的回撥：定時器，事件，ajax

變更檢測的兩種策略

  1. default：無論哪個元件發生變化，都會從根元件開始全域性遍歷呼叫ngDoCheck()
  2. OnPush:只有當元件的@Input屬性發生變化的時候才會呼叫本元件的ngDoCheck 就是在@component中新增changeDetection:ChangeDetectionStrategy.OnPush 就可以了。 仔細讀這篇文章 https://segmentfault.com/a/1190000010928087

ngAfterViewInit/ ngAfterViewChecked 子元件的先執行，父元件後執行 只有這一對執行了，才算是檢視裝配完。

  1. 在元件檢視裝配的時候呼叫這兩個鉤子
  2. 檢視的裝配過程中是從子元件向父元件依次進行的。
  3. 這兩個鉤子裡面不能再修改元件上被繫結的屬性（ @input進來的屬性 ），否則angular會拋異常
  4. ngAfterViewChecked可能會被呼叫非常多次，如果沒有OnPush策略，所有實現了這個鉤子的元件都會被呼叫，千萬不要在這兩個鉤子裡面做複雜的事情，會卡死。到伺服器取資料或者大的遍歷都不要，最好只是賦值而已。
  5. 這一對在content那一對的前面先執行，所以在這一對執行的時候，是可以修改元件上被繫結的值的（@input進來的值）

HostListener裝飾器跟HostBinding裝飾器

  1. HostListener是關聯的方法
  2. HostBinding是關聯的屬性

動態元件

  1. 如何建立動態元件的例項？

  2. 如何給動態元件傳引數？

  3. 如何監聽動態元件的事件？

  4. 如何銷燬動態建立的元件例項？

  5. 動態建立的類（元件）一定要放到AppModule的entryComponents裡面

  6. 動態建立出來的元件是沒辦法利用@Input實現傳值的

  7. 子元件如果想要觸發事件，就利用@Output的方式

    @Output public follow1 = new EventEmitter();
    this.follow1.emit("follow");其中字串follow1是這個方法傳出來的值，如果需要方法繫結應該繫結的是(follow1)="sayHello()"，如果想在父元件中得到字串follow，就必須利用sayHello($event)傳出值

shadowDoM

  1. 是一種渲染模式,它的封裝性更好，是在當前dom樹的基礎上，遊離出了一個新的dom樹，將style跟html都放在單獨這個樹裡面，不會影響到其他的樹。
  2. 使用方式就是在@component中新增encapsulation:ViewEncapsulation.Native，就啟動了shadowDom模式。不會引用多於的bootstrap.css樣式
  3. encapsulation:ViewEncapsulation.Emulated實際上是模擬的shadowDom的模式，是模擬的，所以沒有真正的shadowDom模式渲染好 這是預設配置，保證當前的樣式僅在自身元件使用

angular4

內容投影

  1. 最基本的ng-content用法、 ng-content 這是父元件投影到子元件的內容區域替換，
    angular4
    angular4
    angular4
  2. 用projection slots投影多塊內容
  3. 把自定義元件投影進去
  4. 事件的處理方式

contentChild跟ViewChild

  1. contentChild操作被投影進來的元件 在ngAfterContentInit 裡面執行 在這個元件裡面可以改變屬性跟方法以及賦值這些操作 contentChild用於獲取ng-content裡面的元件 viewchild就直接獲取子元件

模組語法

  1. 一個元件只能屬於一個模組，一個專案必須要有一個根模組app.module.ts
  2. ./的意思是當前目錄下
  3. service是獲取資料的地方，放資料的地方

路由

  1. path：'**' 萬用字元，只要輸入當前模板沒有的，就跳到這裡面來
    {
        path: '',  
        redirectTo: 'home',   //重定向到這裡
        pathMatch: 'full'   //就是空的也會跳轉首頁 
    }

Promise

  1. 建立一個promise物件

模版字串

1.模板字串中的資料值變數表示${weather}

APP_INITIALIZER

APP_INITIALIZER 是一個函式，在應用程式初始化時被呼叫。這就意味著可以通過 AppModule 類的 providers 以 factory 的形式配置它來使用，同時應用程式將會等待它載入完成後進行下一步，所以在這此只適合載入簡單的資料。 第一步建立一個provider

待解決區

this.router.events
    .pipe(filter(evt => evt instanceof NavigationEnd))
    .subscribe(() => this.titleSrv.setTitle());

  @HostBinding('class.layout-fixed') get isFixed() { return this.settings.layout.fixed; }
  @HostBinding('class.layout-boxed') get isBoxed() { return this.settings.layout.boxed; }
  @HostBinding('class.aside-collapsed') get isCollapsed() { return this.settings.layout.collapsed; }

angular4
檢視httpClient https://angular.cn/guide/http

this.message$ = interval(500).pipe(
    map(i => this.messages[i]),
    take(this.messages.length)
);

interval(500). 這是observal的延時500秒的方法

時刻記住，非純管道可能每隔幾微秒就會被呼叫一次。 如果你不小心點，這個管道就會發起一大堆請求“攻擊”伺服器。

Angular 的 AsyncPipe 是一個有趣的非純管道的例子。 AsyncPipe 接受一個 Promise 或 Observable 作為輸入，並且自動訂閱這個輸入，最終返回它們給出的值。 |async

AsyncPipe 管道是有狀態的。 該管道維護著一個所輸入的 Observable 的訂閱，並且持續從那個 Observable 中發出新到的值。

httpClient()本身就是一個subject資料？ this.http.get(url).subscribe( result => this.cachedData = result )

作為釋出者，你建立一個 Observable 的例項

Observable.of(...items) —— 返回一個 Observable 例項，它用同步的方式把引數中提供的這些值傳送出來。 Observable.from(iterable) —— 把它的引數轉換成一個 Observable 例項。 該方法通常用於把一個陣列轉換成一個（傳送多個值的）可觀察物件。 next() 函式可以接受訊息字串、事件物件、數字值或各種結構。

使用 Observable 建構函式可以建立任何型別的可觀察流。 當執行可觀察物件的 subscribe() 方法時，這個建構函式就會把它接收到的引數作為訂閱函式來執行。 訂閱函式會接收一個 Observer 物件，並把值釋出給觀察者的 next() 方法。 Rxjs建立observal的三種方式 1.建立可觀察物件的函式 （1）formPromise() //承諾 (2) Interval() //定時器 （3）const mouseMoves = fromEvent(el, 'mousemove'); //事件 （4）ajax('api/data') ajax事件 2.操作符 操作符是基於可觀察物件構建的一些對集合進行復雜操作的函式 take(count:number) 拿到想要的前count組資料

angular4

錯誤處理

angular4

retry(count:number) 在catchError之前呼叫這個方法，重新呼叫請求錯誤的呼叫數列，如果是http請求，就重新發起那個 HTTP 請求

<ng-container *ngTemplateOutlet="greet"></ng-container>
<hr>
<ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
<hr>
<ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
<hr>
<ng-template #greet><span>Hello</span></ng-template>
<ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
<ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>複製程式碼

相關文章