這篇文章主要介紹Angular2之ng中變更檢測問題的示例分析,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)是專業(yè)的江北網(wǎng)站建設公司,江北接單;提供網(wǎng)站建設、網(wǎng)站設計,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行江北網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
開發(fā)中遇到的問題
在開發(fā)中遇到一個這樣的問題,代碼不便透露,這里用簡單的例子還原一下問題所在:
有三個組件,第一個是用來展示Todo列表的組件TodoComponent,Todo是個類,包含id和name屬性。
@Component({ selector: 'todo-list', template: ` <p *ngFor='let item of todos'>{{ item.name }}</p> `, }) export class TodoComponent{ @Input() todos: Todo[]; public getTodos():Todo[]{ return this.todos; } }
第二個組件同樣是一個Todo列表展示組件TodoDataComponent ,不同的是該組件需要一個TodoComponent類型的輸入,并從TodoComponent組件中獲得需要展示的Todo數(shù)據(jù)。
@Component({ selector: 'app-todo-data', template: `<p *ngFor='let item of todos'>{{ item.name }}</p> <button (click)='getData()'>get data</button>`, styleUrls: ['./todo-data.component.css'], inputs: ['todoComponent'], }) export class TodoDataComponent implements OnInit { todoComponent: TodoComponent; todos: Todo[] constructor() { } ngOnInit() { } getData(){ this.todos=this.todoComponent.getTodos(); } }
最后一個是應用的根組件,根組件根據(jù)loading值來確定是否加載TodoComponent組件,并展示TodoDataComponent 組件。
//app.component.htm <div> <div *ngIf='loading'> <todo-list [todos]='todos'></todo-list> <button (click)='changeall()'>next</button> </div> </div> <div> <app-todo-data [todoComponent]='todoComponent'></app-todo-data> </div> //app.component.ts @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { todos: Todo[]; @ViewChild(TodoComponent) todoComponent: TodoComponent; loading: boolean = true; constructor(private todoService:TodoService){ super(true); } ngOnInit(){ this.todoService.todos.subscribe(data => {this.todos=data}); this.todoService.load(0, 3); } changeall(){ this.todoService.load(3, 3); } }
這樣問題就來了,TodoComponent 組件是否在頁面上展示是不確定的,在上面的例子中根組件最開始沒有渲染TodoComponent組件,最后根據(jù)loading的值將TodoComponent渲染出來。而TodoDataComponent 組件的顯示又需要一個TodoComponent 進行初始化(跟組件通過@ViewChild(TodoComponent)
獲得),這樣造成在開發(fā)模式下出現(xiàn)以下錯誤:template:9:16 caused by: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'
.
該錯誤僅在開發(fā)模式下會報告出來的,解決掉總是更好的選擇,防止在生產(chǎn)環(huán)境下出現(xiàn)問題。
問題的原因及解決辦法
這個問題是ng2中的變更檢測策略造成的,ng2并沒有智能到一有數(shù)據(jù)變更就能自動檢測到的,執(zhí)行變更檢測的一些情況有:組件中的輸入發(fā)生變化、組件中有事件響應、setTimeOut函數(shù)等。
這樣在上面的小例子中, @ViewChild(TodoComponent)todoComponent: TodoComponent;
從undefined到[object Object],而并沒有觸發(fā)ng的變更檢測。
解決辦法也很簡單,ng支持手動觸發(fā)變更檢測,只要在適當?shù)奈恢茫{(diào)用變更檢測即可。
在上面的例子中,解決辦法為:
從@angular/core引入AfterViewInit, ChangeDetectorRef。注入ChangeDetectorRef對象,并在聲明周期鉤子ngAfterViewInit中調(diào)用變更
constructor(private todoService:TodoService, private cdr: ChangeDetectorRef){} ngAfterViewInit(){ this.cdr.detectChanges(); }
ChangeDetectorRef
用來處理ng變更的類,可以使用它來進行完全的手動變更檢測,主要有一下方法:
1.markForCheck()
標記為需要進行變更檢測,官方給的一下例子,setInterval不會觸發(fā)變更檢測,因此模板上的numberOfTicks 并不會發(fā)生變化。
setInterval(() => { this.numberOfTicks ++ // the following is required, otherwise the view will not be updated this.ref.markForCheck(); }, 1000);
2.detach()從變更檢測樹上分離,即該組件不會進行自動的變更檢測,變更需要手動進行,使用detectChanges函數(shù)。
3.detectChanges()手動檢測變更,當變更檢測代價較大時,可以設置為定時進行表更檢測
ref.detach(); setInterval(() => { this.ref.detectChanges(); }, 5000);
4.checkNoChanges()
進行變更檢測,有變更時拋出異常
5.reattach()
與detach()
方法的作用相反
其他一些變更檢測知識
angular2中的每一個組件都關聯(lián)到一個變更檢測器,ChangeDetectorRef可以用來控制變更檢測器進行檢測。
瀏覽器的以下行為可以出發(fā)檢測器進行檢測:
1.所有瀏覽器事件
2.setTimeout()
和setInterval()
3.Ajax請求
OnPush變更檢測模式
組件默認使用的是Default變更檢測模式,只要組件的輸入發(fā)生變化時,就會觸發(fā)檢測器的執(zhí)行。除Default模式外,還有一種OnPush變更檢測模式,使用該模式首先需要在組件聲明修飾符中添加
@Component({ selector: 'todo-list', changeDetection: ChangeDetectionStrategy.OnPush, })
聲明為OnPush變更檢測模式意味著當組件輸入發(fā)生變化時,不一定會觸發(fā)變更檢測器,只有當該輸入的引用發(fā)生變化時,檢測器才會觸發(fā)。例如在一個數(shù)組中某個下標的值發(fā)生變化時,檢測器不會觸發(fā),視圖不會更新,只有該數(shù)組引用發(fā)生變化時,視圖才會更新。當然瀏覽器事件、observable發(fā)出的事件等還是會觸發(fā)檢測器的。
以上是“Angular2之ng中變更檢測問題的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)頁標題:Angular2之ng中變更檢測問題的示例分析
本文URL:http://muchs.cn/article0/piceoo.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營銷推廣、網(wǎng)站制作、軟件開發(fā)、網(wǎng)頁設計公司、品牌網(wǎng)站制作、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)