实施无 zonejs angular 8 项目

Question

我在将我的 angular 项目迁移到 angular 8 时遇到了这两篇文章：

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

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

还有我的应用运行。

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

他们（以及您可以在 .tick() 上获得的其他 google 命中）引用不存在的类或确实存在但不存在的类的方法没有 .tick().

angular8-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

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

constructor(private appRef: ApplicationRef) {} 

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

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

constructor(private cdRef: ChangeDetectorRef) {}    

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

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

实施无 zonejs angular 8 项目

Implementing a zonejs-less angular 8 project

zonejs

angular

angular-changedetection