我正在将我的 Angular 项目迁移到 Angular 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
,然后我删除import 'zone.js/dist/zone';
了polyfill.js
,然后我, {ngZone: 'noop'}
在bootstrapModule
我的main.ts
.
我的应用程序在哪里运行。
但当然现在我应该手动添加需要更改检测的点,这就是这些指南严重失败的地方。也许它们已经过时了(分别在 2018 年和 2017 年发布,仅 1-2 年前)。
他们的方法(以及您可以使用的其他谷歌点击.tick()
)引用不存在的类或确实存在但没有的类.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');
}
);
}