Question

我和其他人一样有类似的错误。但我真的可以解决它。错误是错误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

请记住，您必须在firebase serve上清除setInterval。

ngOnDestroy

<强>更新在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"); }); } }手动运行detectChanges以消除初始延迟。

Answer 2

我认为更改检测器参考旧视图已被破坏！您可以检查以确保在运行detectChanges之前未破坏您的视图。

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

希望这有帮助！

Answer 3

问题显然来自 detectChanges() ，因为更改已完成，并且在组件的销毁阶段调用了该方法。

要解决此问题，请使您的组件实现OnDestroy，然后您需要取消使this.ref.detectChanges（）被调用的更改。

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

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

Angular 4中ChangeDetector引用中的错误

3 个答案: