问题标签 [angular-changedetection]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - 分离组件的角度手动更改检测
使用 Angular Dart 5.2,我正在尝试探索如何将组件从变更检测中分离出来并进行手动检查,但未能成功。这是一个最小的例子:
app_component.dart
分离的.dart
我的期望是分离组件的视图将每 3 秒更新一次,并使用新internal
值。控制台日志反映internal
List 每秒都会用新值创建新的值,我detectChanges()
每 3 秒运行一次,但屏幕上没有任何变化。
我也尝试过的事情:
- 手动将组件从构造函数的更改检测中分离 - 没有任何变化
- 使用
OnPush
策略而markforCheck()
不是detectChanges()
- 按预期工作
所以问题是:如何将组件从变更检测中分离出来并在某些事件上手动触发它?
angular - Angular .nozone 文件上传器组件
我正在使用 Angular 7 尝试创建拖放文件上传组件。我让它在下面工作。
我的问题是这方面的性能很糟糕(drop 和 saveFiles() 运行之间的延迟时间约为 4 秒),因为每次触发的事件dragover
都在运行更改检测。dragleave
经过大量研究后,我发现最好的解决方案应该是dragover
从 ngzone 中删除事件,这将阻止更改检测触发。从这里开始:https ://github.com/angular/angular/pull/21681
这样做的一个非常简单的方法似乎是(dragover.nozone)="stopAndPrevent($event)"
. 这确实解决了性能问题,但它也不再起作用,因为浏览器恢复为使用其默认行为(在浏览器中加载文件)忽略event.preventDefault();
. 有谁知道更好的方法或知道如何解决我在这里遇到的性能问题?
angular - 子元素初始化后,父组件对子 DOM 的操作导致 ExpressionChangedAfterItHasBeenCheckedError
我想在子组件初始化后从父组件对子组件进行一些操作。
家长:
孩子:
链接到StackBlitz进行复制
编辑:
如果我添加setTimeout
到父组件,它可以工作。我可以在没有的情况下实现它setTimeout
吗?
angular - Angular7 - [ngModel] 不会在组件中更新,当两次输入相同的值时
最小的 Stackblitz 示例
https://stackblitz.com/edit/angular-mqqvz1
在 Angular 7 应用程序中,我创建了一个带有<input>
字段的简单组件。
当我用键盘更改输入值时,我希望将值格式化为onBlur。- 在最小的例子中,我只想向它添加字符串“EDIT”。
这基本上是有效的:
- 如果我输入“test”并模糊该字段,它将更改为“test EDIT”
- 如果我输入“lala”并模糊该字段,它将更改为“lala EDIT”
但是 ,当我输入“测试”-模糊(它有效)并再次输入“测试”时,它不再有效!
-functiononInputUpdate()
被调用(你可以在控制台日志中看到它),变量inputValue
被更新(你可以在组件中看到它{{inputValue}}
),但是输入值没有改变!
我希望它是“测试编辑”,但它仍然是“测试”。
当我输入另一个字符串时它可以工作,但是连续输入相同的字符串 2 次不起作用。这是为什么?我怎样才能解决这个问题?
组件.html
组件.ts
angular - ChangeDetectorRef 破坏状态
我们有一个组件元素到另一个组件的 Jumpto 操作。在这种情况下,ChangeDetectorRef[destroyed]
总是正确的,因为它我无法强制ChangeDetectorRef.detectChanges()
运行
home.component
仪表板.组件
它是否携带home.component
被破坏的实例dashboard.component
?如何克服这个?
angular - 在 prodMode 中更改检测角度
嗨,我收到这个错误“表达式在检查后已更改”,但我的应用程序的行为是正确的。第一个问题是如果发生错误,为什么组件可以正常工作?
例如,我有 2 个兄弟组件,它们像这样使用它们:
当 cmp-a 中的 onSelectItem 发出时,我得到错误。但 selectedItem 正确传递给 cmp-b 并且一切都很好,还可以!
第二个问题是如果真的发生错误,为什么在 prod 模式下不通过角度框架显示此错误?
谢谢
angular - Angular - 承诺在下一个变更检测周期解决
我正在调用一个返回 Promise.all 的函数。
只有当我打开浏览器控制台或关闭它时,才会触发成功回调。`
angular - 更改检测;application.tick 被递归调用?为什么
我有一个父组件 A 和子组件 b 和服务 c 用于加载加载弹出服务的成功和失败。
在 B 子组件中有一个称为 newchanges 的按钮,b 组件发出值并在组件中调用函数,并且在服务调用中有一个服务调用。
在不断单击子组件 b newchanges 按钮时,我正在递归调用 error.application.tick 。
如果我不使用 application.tick ,则加载对话框未关闭,因此我已在服务中的应用程序引用中使用。它是所有模块的全球服务。
任何人都可以帮助解决:
这是服务调用成功和关闭加载器失败时使用的加载器服务。
我需要关闭加载程序,该加载程序是在另一个服务成功和失败中使用的服务,当我不使用应用程序引用时,它没有关闭,所以我在此之后使用了这个,我点击不断调用服务得到一个提到的错误。
我尝试了另一个使用 zone 的选项,加载程序未关闭:
android - ChangeDetectector 调用 onLoad
所以我有一个自定义组件,其中包含一些需要调用 changeDectector.detectChanges() 的动画
来自我的 childComponent.ts:
这一直有效,直到我向我的父组件添加了一个 ngif,如下所示:
出于某种原因,当我添加 ngif 时,它导致 childComponent 多次调用 onLoad。因此,每次我调用 this.changeDetector.detectChanges() 时,都会触发 onLoad 方法,从而导致“超出最大调用堆栈大小”。有谁知道这里发生了什么?我该如何解决?
提前谢谢各位!
angular - Angular 的变更检测机制让我失望
到目前为止,我已经为一个非常奇怪的问题而战了一个多小时:
...以及上述视图背后的代码:
用例 #1,有效的一个:用户未登录;然后他或她通过 google-auth 程序(使用 Firebase 提供的弹出机制)和ng-if get 按预期立即更新。
用例#2,无效的:在用户登录并刷新页面后——即使console.log
报告isSignedIn
变成true
预期的那样——除非点击按钮,否则不会发生视觉变化;只有在该按钮被重新呈现为正确的ng-if
选项之后。
我远非 Angular 大师,对变更检测机制知之甚少。求救。