ChangeDetector Ref in Angular 4中的錯誤

Question

我和其他人有類似的錯誤。但我真的可以解決它。錯誤是ERROR Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges.我已經查看其他人的類似問題，但是我看不到我的應用程序的良好答案。我想檢測更改是否有5秒鐘的新數據。我希望它出現在我的瀏覽器中。所以我用改變了Detector ref，但是它給出了錯誤。

export class UsersListComponent implements OnInit { 
    closeResult: string; 
    users: any; 
    subscription: Subscription; 
    modalRef: NgbModalRef; 
    intervalHolder: any; 
    constructor(private modalService: NgbModal, 
       private usersService: UsersService, 
       private router: Router, 
       private ref: ChangeDetectorRef 
      ) { 

    ref.detach(); 
    setInterval(() => { 
    if (this.ref !== null && 
     this.ref !== undefined && 
     ! (this.ref as ViewRef).destroyed) { 
      this.ref.detectChanges(); 
    } 
}, 5000); 


    } 

    ngOnInit() { 
    this.getAllUsers(); 
    } 

    getAllUsers() { 
     this.subscription = this.usersService.getAll() 
     .subscribe(
      (data:any) => { 
      this.users = data.users; 
      console.log(data); 
      }, 
      error => { 
      alert("Error"); 
      }); 
    } 

    onCreateUser(form: NgForm){ 
    const name = form.value.name; 
    const email = form.value.email; 
    const password = form.value.password; 
    console.log(name); 
    this.usersService.addUser(name, email, password) 
     .subscribe(
      data => { 
      alert("User Created"); 
      console.log(data); 
      this.modalRef.close(); 
      this.usersService.clearCache(); 
      this.getAllUsers(); 
      }, 
      error => { 
      alert("Error Adding"); 
      console.log(error); 
      }); 
    } 

ngOnDestroy() { 
    clearInterval(this.intervalHolder); 
    this.subscription.unsubscribe() 
    } 

Answer 1

只要記住，你必須清除setInterval太上ngOnDestroy。在getAllUsers手動

export class UsersListComponent implements OnInit { 
    closeResult: string; 
    users: any; 
    subscription: Subscription; 
    modalRef: NgbModalRef; 

    intervalHolder: any; 

    constructor(private modalService: NgbModal, 
       private usersService: UsersService, 
       private router: Router, 
       private ref: ChangeDetectorRef 
      ) { 

    ref.detach(); 
    this.intervalHolder = setInterval(() => { 
     this.ref.detectChanges(); // you don't need this detectChanges, you can just use the one in the getAllUsers and everything will work as expected 
     this.getAllUsers(); 
    }, 5000);  

    } 

    ngOnDestroy() { 
    this.subscription.unsubscribe(); 
    clearInterval(this.intervalHolder); 
    } 

getAllUsers() { 
     this.subscription = this.usersService.getAll() 
     .subscribe(
      (data:any) => { 
      this.users = data.users; 
      // This will help you with the initial load delay. 
      this.ref.detectChanges(); 
      console.log(data); 
      }, 
      error => { 
      alert("Error"); 
      }); 
    } 

} 

UPDATE 運行detectChanges以除去初始延遲。

Answer 2

問題顯然來自detectChanges()因爲變化完成，在組件的破壞階段調用的方法。

要解決此問題，請使組件實現OnDestroy，然後您需要取消調用this.ref.detectChanges（）的更改。

export class UsersListComponent implements OnInit,OnDestroy { 
    // ... your code 

    ngOnDestroy() { 
    this.cdRef.detach(); 
    } 
} 

Answer 3

我認爲變化探測器被引用舊視圖已被破壞！ 在運行detectChanges之前，您可以檢查以確保您的視圖不被破壞。

setInterval(() => { 
    if (this.ref !== null && 
     this.ref !== undefined && 
     ! (this.ref as ViewRef).destroyed) { 
      this.ref.detectChanges(); 
    } 
}, 5000); 

希望得到這個幫助！