目前，我有一個側邊欄可以讓我點擊各個組件。這些組件重繪 API 呼叫以獲取資料。但是，當我點擊另一個組件的組件時，舊組件會不斷重繪 API 資料，即使我已經點擊它不需要它。
下面是一個測驗組件。當我單擊組件時，它會列印出“測驗組件仍處于活動狀態”。當我單擊組件到另一個組件時，它仍然顯示“測驗組件仍處于活動狀態”，這告訴我該組件仍在運行。一旦我點擊了它，有沒有辦法關閉它？或者有沒有更好的方法來獲取新資料？
export class TestComponent implements OnInit {
userActivity;
constructor(
) { }
ngOnInit() {
this.refreshData();
}
refreshData(){
this.userActivity = setTimeout(() => {
// where api data is called out
console.log('test component is still active');
this.refreshData();
}, 5000);
}
}
uj5u.com熱心網友回復：
這是在處理異步代碼（例如訂閱或setTimeout()Angular 組件內部）時非常常見的問題。Angular 不會自動取消訂閱或“殺死”這樣的異步代碼——你必須照顧它。
根據具體問題，有多種處理方法。在您的情況下，您已經存盤了從setTimeoutin回傳的句柄userActivity。您可以使用此句柄并清除 Angular 的OnDestroy 生命周期鉤子內的超時。將其OnDestroy視為 的對應物OnInit，當組件被銷毀時它會被呼叫。
export class TestComponent implements OnInit, OnDestroy {
userActivity;
constructor() {}
ngOnInit() {
this.refreshData();
}
refreshData() {
this.userActivity = setTimeout(() => {
// where api data is called out
console.log('test component is still active');
this.refreshData();
}, 1000);
}
ngOnDestroy() {
clearTimeout(this.userActivity);
}
}
您可以在此 Stackblitz 中看到它的運行情況。如果您查看控制臺輸出，您應該會看到當您從組件 1 切換到組件 2 時，您的 console.log 不再被記錄。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/373481.html
上一篇：帶有extends子句的泛型型別并不總是像他們應該的那樣縮小范圍
下一篇：基于陣列值的物件鍵