問(wèn)題起源

MainComponent：

@Component({
  selector: 'main',
  template: `
    <MenuComponent [isReport]="isReport">
	  </MenuComponent>
 `,
  changeDetection:ChangeDetectionStrategy.OnPush
})
export class MainComponent {
  ...
}

現(xiàn)在有一個(gè)MainComponent，我需要在這個(gè)組件中引用一個(gè)另一個(gè)組件MenuComponent。

import { Component, Input} from '@angular/core';
import { Subject, debounceTime } from 'rxjs';
@Component({
  selector: 'movie',
  styles: ['div {border: 1px solid black}'],
  template: `
    <div (mouseover)="mouseOver()">
      <h3>{{ menu }}</h3>
    </div>`
})
export class MovieComponent {
  @Input() isReport: boolean = false;
  menu: string = '我是Menu';
  mouseOver$: Subject<any> = new Subject();
  ngOnInit(): void {
    this.mouseOver$.pipe(debounceTime(250)).subscribe((data) => {
       this.menu = 'New: ' + this.menu;
    });
  }
  mouseOver(): void {
    this.mouseOver$.next(this.menu);
  }
}

這個(gè)MenuComponent在其他的頁(yè)面使用起來(lái)是正常的，而且因?yàn)槭?strong>Menu組件，所以上面很有多mouseover事件，這些事件也可以正常工作。但，這個(gè) MenuComponent 放在MainComponent中，mouseover事件就有問(wèn)題了，調(diào)試了下mouseover事件，代碼都正確執(zhí)行了，感覺(jué)代碼并沒(méi)有什么問(wèn)題。因?yàn)檫@個(gè)組件放在其他頁(yè)面里，行為完全正常，所以感覺(jué)不是組件本身的問(wèn)題。

表現(xiàn)的現(xiàn)象是：

Menu里的mouseover行為很怪異，你over到A的時(shí)候，顯示的是B的數(shù)據(jù)，當(dāng)你over到B的時(shí)候顯示的是A的數(shù)據(jù)，整個(gè)錯(cuò)亂了。

第一反應(yīng)就是，這會(huì)不會(huì)是和MainComponent中的mouseover事件沖突了呢？

檢查了一遍，沒(méi)有發(fā)現(xiàn)問(wèn)題所在。但是有意外收獲，啊啊啊，MainComponent組件使用的是OnPush變更檢測(cè)策略，難怪其他頁(yè)面都好使，就這個(gè)地方有問(wèn)題了。好了，問(wèn)題應(yīng)該就是OnPush造成的。關(guān)于變更檢測(cè)策略的，那還不是手到擒來(lái)，在熟悉不過(guò)了，來(lái)來(lái)來(lái)，一起簡(jiǎn)單看一下這個(gè)OnPush。

OnPush策略

Angular有兩種變更檢測(cè)的策略，一種是Default，另一種就是這個(gè)OnPush。OnPush這個(gè)變更檢測(cè)策略主要為了改善性能。當(dāng)我們?cè)O(shè)置組件裝飾器的 changeDetection為OnPush的時(shí)候，Angular 每次觸發(fā)變更檢測(cè)后會(huì)跳過(guò)該組件和該組件的所以子組件變化檢測(cè)。

好了，我們也知道什么是OnPush變更檢測(cè)策略了，它會(huì)跳過(guò)當(dāng)前組件和其子組件的變更 檢測(cè)。也就是說(shuō)，你改變這個(gè)組件的屬性值，但這些屬性值并不會(huì)更新到視圖上，也就是組件數(shù)組和視圖不一致。那我們知道了這一點(diǎn)，再回去看一下MenuComponent。

由于MainComponent的變更策略設(shè)置為了OnPush，他的子組件的變更檢測(cè)策略會(huì)跳過(guò)，也就是MenuComponent變更檢測(cè)不起作用了。但是，你會(huì)發(fā)現(xiàn)當(dāng)你操作Menu的時(shí)候視圖還是會(huì)有變化的。這是怎么回事？

大部分人可能花一分鐘了解了OnPush是什么，但是沒(méi)有了解透徹。繼續(xù)往下看。

在 OnPush 策略下，以下這種情況會(huì)觸發(fā)組件的變化檢測(cè)：

當(dāng)前組件或子組件之一觸發(fā)了事件

如果OnPush組件或其子組件之一觸發(fā)（DOM/BOM）事件，例如 click，mouseover，mouseleave，resize, keydown，則將觸發(fā)變化檢測(cè)（針對(duì)組件樹(shù)中的所有組件）。

需要注意的是在OnPush策略中，以下操作不會(huì)觸發(fā)變化檢測(cè)：

• setTimeout()
• setInterval()
• Promise.resolve().then()
• this.http.get('...').subscribe()

原來(lái)如此，盡管是OnPush策略，但是DOM/BOM事件還是會(huì)觸發(fā)變更檢測(cè)的，所以MenuComponent的視圖還是會(huì)有變化的，也就是這個(gè)變更檢測(cè)是起作用的。但問(wèn)題還是沒(méi)有解決，Menu mouseover的時(shí)候還是會(huì)錯(cuò)亂??！再來(lái)看一下代碼。

ngOnInit(): void {
    this.mouseOver$.pipe(debounceTime(250)).subscribe((data) => {
       this.menu = 'New: ' + this.menu;
    });
}

引起問(wèn)題的地方就是這debounceTime，這個(gè)之前在介紹Rxjs原理的時(shí)候，說(shuō)過(guò)這個(gè)是異步的。之前掌握的東西，終于派上用場(chǎng)了。

總結(jié)一下，就是mouseover是異步的，會(huì)觸發(fā)變更檢測(cè)，但是由于debounceTime是異步又嵌套了一下，debounceTime一般是用setTimeout來(lái)實(shí)現(xiàn)的。所以，debounceTime里的數(shù)據(jù)變化并不能及時(shí)的顯示到視圖中。終于找到問(wèn)題的根源了。啦啦啦。問(wèn)題找到了，那解決起來(lái)多easy啊。它不是不會(huì)觸發(fā)變更檢測(cè)嗎，我就手動(dòng)讓它觸發(fā)一下吧。

import { Component, Input, ChangeDetectorRef } from '@angular/core';
import { Subject, debounceTime } from 'rxjs';
@Component({
  selector: 'movie',
  styles: ['div {border: 1px solid black}'],
  template: `...`
})
export class MovieComponent {
  ...
  constructor(private cd: ChangeDetectorRef){}
  ngOnInit(): void {
    this.mouseOver$.pipe(debounceTime(250)).subscribe((data) => {
       this.menu = 'New: ' + this.menu;
       this.cd.detectChanges();
    });
  }
  ...
}

總結(jié)

• 平時(shí)多注意知識(shí)積累，不能按照網(wǎng)上說(shuō)的解決方案復(fù)制過(guò)來(lái)就解決了，遇到簡(jiǎn)單問(wèn)題這樣是沒(méi)有問(wèn)題的，遇到復(fù)雜的就沒(méi)辦法了；
• 當(dāng)設(shè)置為Onpush策略時(shí)，要更加注意，用OnPush就是要減少變更檢測(cè)的次數(shù)，就不要無(wú)論什么情況都detectChanges，或markForCheck，失去了意義，還是要規(guī)范使用；
• 要優(yōu)雅實(shí)現(xiàn)代碼，項(xiàng)目中居然還看到把父組件的ChangeDetectorRef作為輸入屬性傳到子組件中，一看就不懂變更檢測(cè)??；

以上就是詳解Angular組件數(shù)據(jù)不能實(shí)時(shí)更新到視圖上的問(wèn)題的詳細(xì)內(nèi)容，更多關(guān)于Angular組件數(shù)據(jù)實(shí)時(shí)更新視圖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論