1

我正在将我的 Angular 项目迁移到 Angular 8 并遇到了这两篇文章:

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

我跑了npm remove zone.js,然后我删除import 'zone.js/dist/zone';polyfill.js,然后我, {ngZone: 'noop'}bootstrapModule我的main.ts.

我的应用程序在哪里运行。

但当然现在我应该手动添加需要更改检测的点,这就是这些指南严重失败的地方。也许它们已经过时了(分别在 2018 年和 2017 年发布,仅 1-2 年前)。

他们的方法(以及您可以使用的其他谷歌点击.tick())引用不存在的类或确实存在但没有的类.tick()

错误消息:“typeof ApplicationRef”类型上不存在属性“tick”

Angular 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');
      }
    );
  }
4

1 回答 1

1

如果你想在整个 Angular 视图树上调用变更检测,那么你应该使用ApplicationRef这样的实例:

constructor(private appRef: ApplicationRef) {} 

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

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

constructor(private cdRef: ChangeDetectorRef) {}    

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

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

于 2019-09-05T13:09:16.687 回答