问题标签 [ngonchanges]
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.
data-binding - Angular 2双向组件绑定不调用父ngOnChange
我在这里创建了一个 plunker:
http://plnkr.co/edit/8bwqkYQ6tqrpGwHT588y?p=preview
这表明了这个问题。
基本上,我有 2 个组件。第一个组件有一个属性到子组件的双向绑定。
我的父组件是:
和我的子组件:
在孩子中,我设置了一个超时以在 2 秒后以编程方式更改 selectedId 的值,然后将该值发送回父级。
这一切都很好,除了一件事......父级的 ngOnChange 只被调用一次。
我认为父母非常想知道孩子是否改变了价值,否则2路绑定有什么意义?
我在这里想念什么?
angular - Angular 2:onChanges() 不反映对象值的变化
preDefinedSearch
是对象
searchCategory
是字符串,
当我更改这两个值时,在第一个事件中OnChanges
包含两个值,如下所示,
Changes: Object {searchCategory: SimpleChange, preDefinedSearch: SimpleChange}
但是对于这两个属性的下一次更新没有反映,仅包含字符串值作为第一个事件后的更改值OnChnages
。
Changes: Object {searchCategory: SimpleChange}
下面是ngOnChanges
实现:
}
angular - ionic 2组件ion-tabs有rootParams,检测rootParams的变化
我有一个具有离子标签的 ionic2 应用程序,如下所示。
在我的标签页控制器中,我会得到这样的值。
这很好用,现在的问题是,如果“allParams”发生变化,我无法在我的标签页控制器中检测到这些变化。
已经尝试过的东西。
ngONChanges 不检测导航参数的变化。
ngDoCheck 运行多次。如果这将运行一次,那将是正确的修复。或者如果我可以将新值与旧值进行比较,这也是一个很好的解决方案。
知道如何做到这一点吗?
javascript - 对 Angular 2 组件的编程更改不会在单元测试中执行 ngOnChanges
我有一个相当简单的工作 Angular 2 组件。该组件根据我已排序的值数组呈现一些 div 兄弟元素。该组件实现OnChanges
. 排序功能发生在ngOnChanges()
. 最初,我的@Input()
属性引用了一个未排序的值数组。一旦更改检测开始,生成的 DOM 元素就会按预期排序。
我编写了一个 Karma 单元测试来验证组件中的排序逻辑是否已经发生,并且预期的 DOM 元素是否按排序顺序呈现。我以编程方式在单元测试中设置组件属性。调用后fixture.detectChanges()
,组件渲染其 DOM。但是,我是 ngOnChanges()` 函数,我看到它永远不会执行。对这种行为进行单元测试的正确方法是什么?
这是我的组件:
组件模板:
这是我的单元测试:
arrays - Angular2 ngOnChanges 克隆 @Input 数组
我正在使用DashboardComponent
从我的DashboardService
. 然后,此组件将我的对象数组传递给我的表单组件。
(帖子底部的Plunkr链接)
仪表板组件.ts
仪表板组件.html
我这样做是为了让链接到我的表单组件Dashboard
不会对我的服务进行任何调用。
我正在尝试clone
我的@Input,以便我从表单更新的数据没有链接到我的父组件(仪表板),但我似乎无法做到这一点......见下面的代码:
CreateOrderFormComponent.ts
有什么办法可以实现我正在做的事情吗?我不明白为什么我在获取数据时无法克隆我的输入?
从 AngularConnect 制作的这个 Youtube 视频中,他正在做同样的事情,除了他正在操纵一个对象,而我正在操纵一个对象数组。
https://youtu.be/-nsedZwvl9U?t=12m22s
编辑:创建 Plunkr 后,这似乎在那里正常工作。
https://plnkr.co/edit/js1vl0fcgOKtQNqXsWTL?p=preview
编辑 2: 在ngOnInit()
from myDashboardComponent
中,如果我模拟数据,它会在我的子组件中正确克隆。
angularjs - 通过组件引用设置值时,Angular 2 ngOnChanges 未触发
我正在以这种方式动态创建一个组件:
如您所见,我还为“文本”属性分配了一个值。这项工作是可行的,但它不会触发目标组件中的 ngOnChanges,因此也不会触发更改检测(我采用“推送”策略)。
我试图手动触发它
和
但没有成功。
任何想法如何以更好的方式将新文本值分配给目标组件@Input('text')?文本只是一个字符串值。
更新: 我现在已经在目标组件中使用 setter 构建了一个工作:
它有效,但这有点hacky,我仍然更喜欢更“有角度”的方式。
arrays - @Input() 变成子元素后数组是否变为对象?
我对 Angular 2 很陌生,我想通过 @Input() 将在父组件中创建的数组传输给它的子组件。
在父级中,我创建了数组,从服务中添加数据,并将其显示在控制台中(控制台输出 1)。然后在子组件中,我使用 ngOnChanges 再次在控制台中显示它(控制台输出 2)。正如您在下面看到的,数组的长度从 12 变为 0。我想这是因为数组在传递给子对象时变为对象?
我将如何解决这个问题?
家长
孩子
父模板
控制台输出 1 数组 [12]:[对象,对象,...]
控制台输出 2 Array[0]: [Object, Object, ... ]
angularjs - 非组件控制器中的 $onChanges
我正在使用 angular 1.5 并且我有控制器,但它不是一个组件,只是普通的控制器。我尝试在其中使用 $onChanges,但它不起作用。那么,真的可以在非组件控制器上使用 $onChanges 吗?
angular - Angular 2 ngOnChanges 不会在快速变化的输入上触发
我正在使用 Angular 2 @Input 属性将所需的数值传递给这样的子组件。
父组件:
子组件:
在这种情况下,OnChanges 生命周期挂钩仅触发一次而不是 3 次,表明输入值从 0 更改为 3。但是我需要在每次值更改时触发它 (0 -> 1, 1 -> 2 , 2 -> 3 等)。有没有办法做到这一点?
谢谢。
angular - 如何仅在 ngOnInit 中设置每个输入值后触发 ngOnChanges
只有在 ngOnInit 中设置了每个输入值后,我才能触发 ngOnChanges。我的代码-->
我不会在 ngonchanges 中得到我在 ngonit 中初始化的数组,因为 ngonchanges 在 ngonit 之前被调用,我如何在检查 ngonchanges 之前检查是否所有都已初始化?