您好,登錄后才能下訂單哦!
這篇文章主要介紹“Angular開發(fā)組件數據不能實時更新到視圖上怎么解決”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“Angular開發(fā)組件數據不能實時更新到視圖上怎么解決”文章能幫助大家解決問題。
MainComponent:
@Component({
selector: 'main',
template: `
<MenuComponent [isReport]="isReport">
</MenuComponent>
`,
changeDetection:ChangeDetectionStrategy.OnPush
})
export class MainComponent {
...
}
現在有一個MainComponent,我需要在這個組件中引用一個另一個組件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()">
<h4>{{ menu }}</h4>
</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);
}
}
這個MenuComponent在其他的頁面使用起來是正常的,而且因為是Menu組件,所以上面很有多mouseover事件,這些事件也可以正常工作。但,這個 MenuComponent 放在MainComponent中,mouseover事件就有問題了,調試了下mouseover事件,代碼都正確執(zhí)行了,感覺代碼并沒有什么問題。因為這個組件放在其他頁面里,行為完全正常,所以感覺不是組件本身的問題。
表現的現象是:
Menu里的mouseover行為很怪異,你over到A的時候,顯示的是B的數據,當你over到B的時候顯示的是A的數據,整個錯亂了。
第一反應就是,這會不會是和MainComponent中的mouseover事件沖突了呢?
檢查了一遍,沒有發(fā)現問題所在。但是有意外收獲,啊啊啊,MainComponent組件使用的是OnPush變更檢測策略,難怪其他頁面都好使,就這個地方有問題了。好了,問題應該就是OnPush造成的。關于變更檢測策略的,那還不是手到擒來,在熟悉不過了,來來來,一起簡單看一下這個OnPush。
OnPush策略
Angular有兩種變更檢測的策略,一種是Default,另一種就是這個OnPush。OnPush這個變更檢測策略主要為了改善性能。當我們設置組件裝飾器的 changeDetection為OnPush的時候,Angular 每次觸發(fā)變更檢測后會跳過該組件和該組件的所以子組件變化檢測。
好了,我們也知道什么是OnPush變更檢測策略了,它會跳過當前組件和其子組件的變更 檢測。也就是說,你改變這個組件的屬性值,但這些屬性值并不會更新到視圖上,也就是組件數組和視圖不一致。那我們知道了這一點,再回去看一下MenuComponent。
由于MainComponent的變更策略設置為了OnPush,他的子組件的變更檢測策略會跳過,也就是MenuComponent變更檢測不起作用了。但是,你會發(fā)現當你操作Menu的時候視圖還是會有變化的。這是怎么回事?
大部分人可能花一分鐘了解了OnPush是什么,但是沒有了解透徹。繼續(xù)往下看。
在 OnPush 策略下,以下這種情況會觸發(fā)組件的變化檢測:
如果OnPush組件或其子組件之一觸發(fā)(DOM/BOM)事件,例如 click,mouseover,mouseleave,resize, keydown,則將觸發(fā)變化檢測(針對組件樹中的所有組件)。
需要注意的是在OnPush策略中,以下操作不會觸發(fā)變化檢測:
setTimeout()
setInterval()
Promise.resolve().then()
this.http.get('...').subscribe()
原來如此,盡管是OnPush策略,但是DOM/BOM事件還是會觸發(fā)變更檢測的,所以MenuComponent的視圖還是會有變化的,也就是這個變更檢測是起作用的。但問題還是沒有解決,Menu mouseover的時候還是會錯亂??!再來看一下代碼。
ngOnInit(): void {
this.mouseOver$.pipe(debounceTime(250)).subscribe((data) => {
this.menu = 'New: ' + this.menu;
});
}
引起問題的地方就是這debounceTime,這個之前在介紹Rxjs原理的時候,說過這個是異步的。之前掌握的東西,終于派上用場了。
總結一下,就是mouseover是異步的,會觸發(fā)變更檢測,但是由于debounceTime是異步又嵌套了一下,debounceTime一般是用setTimeout來實現的。所以,debounceTime里的數據變化并不能及時的顯示到視圖中。終于找到問題的根源了。啦啦啦。問題找到了,那解決起來多easy啊。它不是不會觸發(fā)變更檢測嗎,我就手動讓它觸發(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();
});
}
...
}
關于“Angular開發(fā)組件數據不能實時更新到視圖上怎么解決”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識,可以關注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。