angular - 角度变化检测仅检测产品中的变化
问题描述
我有一个奇怪的问题,我希望这只是一个简单的解决方法。Angular 中的变更检测不仅仅在生产环境中起作用。
我使用 Angular 7 和 ngrx 作为状态管理构建了一个相当复杂的应用程序。有 2 个主要模块基于路由延迟加载。变更检测策略是 OnPush 并且 99% 的应用程序遵循一种模式,数据来自服务器,通过 ngrx 效果到有状态组件,然后通过异步管道将数据推送到“虚拟”表示组件中。例子:
this.loading$ = this.store.pipe(
select(selector.isLoading),
takeUntil(this.unsubscribe$)
);
<app-loading [loading]="loading$ | async"></app-loading>
打开ng serve
,ng serve --prod
一切都按预期工作,没有问题。然而,在运行ng build --prod
并将 js 文件推送到我们的 .net 解决方案后,更改检测停止工作。
“停止工作”是什么意思?我的意思是它不会改变任何模型或组件,除非发生了 DOM 事件。
例如,使用上面显示的代码,有一个加载微调器会一直显示,直到数据来自服务器。在生产中,微调器会一直停留在屏幕上,直到您随意点击。然后应用程序刷新并显示数据。此问题在整个应用程序中持续存在。也就是说,这个问题不仅仅发生在那里。
该应用程序在 .Net 解决方案中的 .cshtml 文件中加载,如下所示:
<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="main.js"></script>
延迟加载的模块位于 .cshtml 文件的文件夹中,并且没有显示任何错误,因此我必须假设一切都正确连接。
同样,这仅在产品包中。不在 dev 或 serve 或 prod 模式下服务。
解决方案
对于操作员的 rxjs,这最终成为一个非常奇怪的情况。
该应用程序使用 signalR 作为客户端和服务器之间的 API。与集线器的大部分交互都是一个 jquery 承诺。我使用 from 运算符返回数据。
return from(this.proxy.invoke(...args));
由于我无法弄清楚的原因,这在开发中起作用。但是观察者不会在生产中完成,所以即使状态会更新,视图仍在等待观察者完成。
我更新了代码以返回一个可观察的连接。
private async performInvoke(...argu): Promise {
return await this.proxy.invoke(...argu);
}
invoke(...argu): Observable<any> {
return new Observable(o =>
const pInvoke = async () => {
o.next(await this.performInvoke(...argu));
o.complete();
}
}
我在这里进行了简化,所以如果你发现这个,请确保添加尝试捕获和其他错误保护。
推荐阅读
- jmeter - Jmeter 如何避免调用相同的 HTTP Req。针对不同的条件
- ios - 键入时在文本字段中格式化电话号码
- linux - 是否可以对文件夹应用计数功能,然后在文件夹超过限制时删除文件?
- android - 如何在 C# 中将 Android.Net.Uri 转换为字节数组
- bdd - serenity bdd:如何像在黄瓜 BDD 中那样重用测试步骤(@steps)(即使用 pico 容器)
- django - 试图从静态文件夹 Django 中获取图像
- python - res.partner 上的“write”高级访问权限
- javascript - 附加到 Typescript 中的对象变量
- c - 使用 getchar() 和 putchar() 将 int 与字符串交换
- javascript - 循环数组以列出项目