问题标签 [angular2-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.

0 投票
1 回答
1653 浏览

angular - Angular2 可观察变化检测模板更新

出于性能原因,我试图在我的组件上设置手动更改检测。

应用程序的结构:App -> Book(s) -> Page(s)

我在 AppComponent 中订阅了一个 observable,然后运行 ​​ChangeDetectorRef 的“markForCheck”方法。

这似乎触发了 BookComponent(我标记为更新的组件的子组件)中的 ngAfterContentChecked 方法。

这让我相信父组件中的“markForCheck”也会更新所有子组件。

但是,即使在子组件(BookComponent)中执行了 ngAfterContentChecked,该组件的模板也不会更新!

我是否应该听取每个孩子的可观察性(有时在组件层次结构中有几个层次)?还是我做错了什么?为什么即使模板没有更新,ngAfterContentChecked 也会在子组件中执行?

一些相关的代码。

0 投票
1 回答
306 浏览

typescript - Angular2 - 在 SebmGoogleMapMarker 事件“markerClick”触发后,视图没有更新

我有一个看起来像这样的数组:

如果我点击一个标记,它会打开一个包含所选标记信息的部分。

这里是googlemaps的html:

这里的函数 updateDiv():

这是我要显示 id 的 div 的标记locations

但它似乎不起作用!

0 投票
3 回答
1583 浏览

angular - Angular 2 change detection - 如何解决组件之间的循环依赖?

我读过 Angular 2 更改检测是单向的,从组件树的顶部到底部,并且它在单次通过后变得稳定,这意味着没有多个更改检测周期。鉴于这些假设,在我们有一个父组件和一个子组件具有相互依赖的属性的情况下会发生什么?例子:

  1. 基于用户事件,父组件更新子组件属性
  2. 此更新会在子组件中触发一个事件,该事件会更新父组件上的属性
  3. 父属性更新触发另一个更新子组件的事件
  4. ...

据我了解,Angular 1 中的类似情况是通过对这些相互依赖的属性触发的周期数设置限制来解决的,这会导致框架抛出错误。

Angular 2 是如何解决的?上例中的哪一点实际触发了变更检测?

0 投票
2 回答
814 浏览

angular - Angular 1.x vs 2 变更检测性能

我一直在玩 AngularJS 1.x 和 Angular 2,试图比较它们的性能。

这是一个Plunkr ,它显示了 Angular 1.x 的“缺点”。如果作用域上存在太多元素,您会注意到在编辑输入字段时呈现滞后,因为框架每次检测到可能已更改的事件时都会检查作用域上的所有元素。

摘自第一个 Plunkr (html):

摘自第一个 Plunkr (js):

});

在这个Plunkr中,我在 Angular 2 中编写了一个类似的示例。似乎根本没有滞后。这在 Angular 2 中是如何解决的?框架是否以某种方式知道只有输入字段发生了更改,还是因为 VM 优化的更改检测器而在执行脏检查时更快?

摘自第二个 Plunkr:

0 投票
1 回答
1162 浏览

angular - 如何在 angular2 中推送和更新深层嵌套值并保持 ui 状态

我有一个深层嵌套的数组如下

因为我在 init 上检索主数组,我如何推送 sub2_array1 更新的值?但由于在更改视图呈现和 ui 状态更改,包括一些活动的类组件。那我该如何维持呢?我读了一些关于pipeschangedetectorRef不知道如何使用它的东西?提前致谢。

0 投票
1 回答
217 浏览

javascript - 角度2:根据路径更改视图的静态部分

首先,对不起这个奇怪的标题。我找不到更好的总结。

所以我想要创建一个包含基本 3 部分结构(页眉/内容/页脚)的应用程序。根据活动的路由,标头部分应该更改(每个标头都是自己的组件)。

到目前为止,显示的标头由“mainApp.component”中的 [ngSwitch] 语句确定,如下所示:

“mainApp.component.ts”看起来像这样:

当我转到 mylocalhost:4200/loginlocalhost:4200/home手动时,这工作得很好,因为它呈现 mainApp.component,检查哪个是当前路由并相应地显示标题。但是,当我通过例如按钮单击更改路线时

navigateToHome ()很简单

标头保持不变,因为更改检测不会考虑路由更改,因此不会重新运行 [ngSwitch] / 重新渲染 mainApp.component。

我已经考虑过在它们所属的组件模板中包含标题,但如果有办法在主组件中做到这一点,我会更喜欢。

如果你们对如何解决这个问题有任何想法,或者如何更好地/另一种方式/最佳实践的方式,我很高兴听到它。

谢谢。

0 投票
1 回答
88 浏览

angular - Angular2 路由器 V3 和菜单选择

我希望我的菜单通过基于当前路线在 menuItem(如 Ng1 中)上应用“活动”类来显示当前路线。

所以这行得通,但有两个问题我需要一些帮助来解决:

1)我需要调用this.changeDetector.detectChanges();否则活动类不适用于页面的初始加载。(我不明白为什么这不是开箱即用的......)

2)关于模板,我还没有找到不在routerLink中重复我自己的方法。我希望能够将 ref 传递给我的数据,menu2.data但它不起作用......

任何帮助/建议将不胜感激谢谢

0 投票
2 回答
375 浏览

data-binding - Angular2 区域变化检测

我想知道是否所有异步事件和回调都可以通过将所有组件逻辑(包括组件内的非组件指令的逻辑)包装在一个区域中来追溯到特定的源组件,然后只需要检查源组件的更改假设所有更改都遵循单向流,则任何具有来自源组件的更改输入的子组件。

这种理解合理吗?

这种变化检测策略在 Angular2 中可用吗?

为什么 Angular2 在任何异步 (XHR) 事件之后检测所有组件的变化?

0 投票
2 回答
2549 浏览

javascript - Angular2:可观察到的变化检测

只是我用 Angular2 RC3(使用 Angular-CLI)尝试了我的第一个应用程序,但我迷失了这个......

我对变量的“更改检测”有疑问word。我更新了Observable 方法中的word变量subscribe,但没有检测到任何变化。

app.component.ts

我记得在 Angular 1 中$scope.$apply对类似情况的使用,我在 Angular2 中搜索相同,我发现NgZone.run,我试图在里面执行NgZone.run,但什么也没有。

我做错了什么?

非常感谢。


额外的:

我与 Observable 分享我的服务:

语音识别.service.ts

0 投票
2 回答
3491 浏览

angular - 即使列表引用发生变化,如何重用 ngFor 的元素?

我有一个 Angular 2 组件,用于*ngFor呈现嵌套的数字数组。

当我更改data时,Angular 会替换<chart>元素,即使新数组具有相同的尺寸。我只希望它更新图表的属性但保留元素(以便我可以为数据更改设置动画)。

Angular 替换元素是可以理解的,因为新数组是一个新的对象引用。但是我该如何规避呢?