這篇文章主要介紹Angular2之ng中變更檢測問題的示例分析,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯公司公司2013年成立,先為華容等服務建站,華容等地企業(yè),進行企業(yè)商務咨詢服務。為華容企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。開發(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數據。
@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(); } }
最后一個是應用的根組件,根組件根據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組件,最后根據loading的值將TodoComponent渲染出來。而TodoDataComponent 組件的顯示又需要一個TodoComponent 進行初始化(跟組件通過@ViewChild(TodoComponent)
獲得),這樣造成在開發(fā)模式下出現以下錯誤:template:9:16 caused by: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'
.
該錯誤僅在開發(fā)模式下會報告出來的,解決掉總是更好的選擇,防止在生產環(huán)境下出現問題。
問題的原因及解決辦法
這個問題是ng2中的變更檢測策略造成的,ng2并沒有智能到一有數據變更就能自動檢測到的,執(zhí)行變更檢測的一些情況有:組件中的輸入發(fā)生變化、組件中有事件響應、setTimeOut函數等。
這樣在上面的小例子中,@ViewChild(TodoComponent)todoComponent: TodoComponent;
從undefined到[object Object],而并沒有觸發(fā)ng的變更檢測。
解決辦法也很簡單,ng支持手動觸發(fā)變更檢測,只要在適當的位置,調用變更檢測即可。
在上面的例子中,解決辦法為:
從@angular/core引入AfterViewInit, ChangeDetectorRef。注入ChangeDetectorRef對象,并在聲明周期鉤子ngAfterViewInit中調用變更
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函數。
3.detectChanges()手動檢測變更,當變更檢測代價較大時,可以設置為定時進行表更檢測
ref.detach(); setInterval(() => { this.ref.detectChanges(); }, 5000);
4.checkNoChanges()
進行變更檢測,有變更時拋出異常
5.reattach()
與detach()
方法的作用相反
其他一些變更檢測知識
angular2中的每一個組件都關聯到一個變更檢測器,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ā)。例如在一個數組中某個下標的值發(fā)生變化時,檢測器不會觸發(fā),視圖不會更新,只有該數組引用發(fā)生變化時,視圖才會更新。當然瀏覽器事件、observable發(fā)出的事件等還是會觸發(fā)檢測器的。
以上是“Angular2之ng中變更檢測問題的示例分析”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注創(chuàng)新互聯網站建設公司行業(yè)資訊頻道!
另外有需要云服務器可以了解下創(chuàng)新互聯建站muchs.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
新聞名稱:Angular2之ng中變更檢測問題的示例分析-創(chuàng)新互聯
文章轉載:http://muchs.cn/article46/hihhg.html
成都網站建設公司_創(chuàng)新互聯,為您提供網站制作、營銷型網站建設、網站設計公司、品牌網站建設、虛擬主機、網頁設計公司
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯