实现无区域角8项目

Question

我正在将我的角项目迁移到角8，并遇到了以下两篇文章：

• https://blog.angularindepth.com/boosting-performance-of-angular-applications-with-manual-change-detection-42cb396110fb
• https://blog.angularindepth.com/do-you-still-think-that-ngzone-zone-js-is-required-for-change-detection-in-angular-16f7a575afef

我现在有兴趣实现一个没有zonejs的项目。

我运行npm remove zone.js，然后删除polyfill.js中的import 'zone.js/dist/zone';，然后将, {ngZone: 'noop'}添加到main.ts中的bootstrapModule调用中。

当我的应用程序运行的时候。

当然，现在我应该手动添加需要检测更改的点，而这正是这些指南失败的地方。也许它们已经过时了(分别于2018年和2017年出版，仅在1-2年前)。

它们(以及您可以在.tick()上获得的其他谷歌点击)引用不存在的类或确实存在但没有.tick()的类。

​

​

对于角8-9，es6，ECMAScript，手动更改检测的类型实现，有什么真实的例子？

例如，现在我在登陆页上缺少了一个，它应该在令牌接收后重定向：

  ngOnInit() {
    this.loading = true;
    // reset login status
    if (this.window.navigator.userAgent != 'fakeAgent') {
      this.tryConnect();
      // Maybe tigger changedetect here?
    }
  }

  tryConnect(withLogout?: boolean) {
    this.error = '';
    this.loading = true;
    let uid = $('input#uid');
    if (!this.authenticationService.isOAuth && uid && uid.val()) {
      const data = {...};

      this.http.post(AppGlobal.API_URL + 'auth/tokens', data).subscribe(
        res => {
          // console.log(res);
          // Maybe tigger changedetect here?
          this.authenticationService.setToken(res.json());
          this.autologin();
        },
        err => {
          // console.log(err);
          this.authenticationService.setToken('unknown');
          this.autologin();
        }
      );
    }
  }

  autologin() {
    this.authenticationService.autologin().subscribe(
      result => {
        this.success = 'Connected';
        this.currentUser = this.authenticationService.getCurrentUser();
        let afterlogin = localStorage.getItem('afterlogin');
        let afterloginparams: any = JSON.parse(
          localStorage.getItem('afterloginparams')
        );
        if (!afterloginparams) {
          afterloginparams = {};
        }
        localStorage.removeItem('afterlogin');
        localStorage.removeItem('afterloginparams');
        if (afterlogin) {
          this.router.navigate([afterlogin], {queryParams: afterloginparams});
        } else {
          this.router.navigate(['/']);
        }
        // OR TRIGGER CHANGE DETECTION HERE ?
      },
      error => {
        let afterlogin = localStorage.getItem('afterlogin');
        let afterloginparams: any = JSON.parse(
          localStorage.getItem('afterloginparams')
        );
        if (!afterloginparams) {
          afterloginparams = {};
        }
        localStorage.removeItem('afterlogin');
        localStorage.removeItem('afterloginparams');
        if (afterlogin) {
          this.router.navigate([afterlogin], {queryParams: afterloginparams});
        } else {
          this.router.navigate(['/']);
        }
        this.finishedOnError('User not found');
      }
    );
  }

Answer 1

如果您想要调用上的更改检测--整个角度视图树，那么您应该使用ApplicationRef实例，如下所示：

constructor(private appRef: ApplicationRef) {} 

someMethod() {
  this.appRef.tick();
}

但我建议你改用cdRef.detectChanges()。

constructor(private cdRef: ChangeDetectorRef) {}    

someMethod() {
  this.cdRef.detectChanges();
}

这将调用当前组件及其所有子组件上的更改检测。