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

0 投票
1 回答
2785 浏览

data-binding - Angular 2双向组件绑定不调用父ngOnChange

我在这里创建了一个 plunker:

http://plnkr.co/edit/8bwqkYQ6tqrpGwHT588y?p=preview

这表明了这个问题。

基本上,我有 2 个组件。第一个组件有一个属性到子组件的双向绑定。

我的父组件是:

和我的子组件:

在孩子中,我设置了一个超时以在 2 秒后以编程方式更改 selectedId 的值,然后将该值发送回父级。

这一切都很好,除了一件事......父级的 ngOnChange 只被调用一次。

我认为父母非常想知道孩子是否改变了价值,否则2路绑定有什么意义?

我在这里想念什么?

0 投票
0 回答
605 浏览

angular - Angular 2:onChanges() 不反映对象值的变化

preDefinedSearch是对象

searchCategory是字符串,

当我更改这两个值时,在第一个事件中OnChanges包含两个值,如下所示,

Changes: Object {searchCategory: SimpleChange, preDefinedSearch: SimpleChange}

但是对于这两个属性的下一次更新没有反映,仅包含字符串值作为第一个事件后的更改值OnChnages

Changes: Object {searchCategory: SimpleChange}

下面是ngOnChanges实现:

}

0 投票
0 回答
378 浏览

angular - ionic 2组件ion-tabs有rootParams,检测rootParams的变化

我有一个具有离子标签的 ionic2 应用程序,如下所示。

在我的标签页控制器中,我会得到这样的值。

这很好用,现在的问题是,如果“allParams”发生变化,我无法在我的标签页控制器中检测到这些变化。

已经尝试过的东西。

ngONChanges 不检测导航参数的变化。

ngDoCheck 运行多次。如果这将运行一次,那将是正确的修复。或者如果我可以将新值与旧值进行比较,这也是一个很好的解决方案。

知道如何做到这一点吗?

0 投票
2 回答
1478 浏览

javascript - 对 Angular 2 组件的编程更改不会在单元测试中执行 ngOnChanges

我有一个相当简单的工作 Angular 2 组件。该组件根据我已排序的值数组呈现一些 div 兄弟元素。该组件实现OnChanges. 排序功能发生在ngOnChanges(). 最初,我的@Input()属性引用了一个未排序的值数组。一旦更改检测开始,生成的 DOM 元素就会按预期排序。

我编写了一个 Karma 单元测试来验证组件中的排序逻辑是否已经发生,并且预期的 DOM 元素是否按排序顺序呈现。我以编程方式在单元测试中设置组件属性。调用后fixture.detectChanges(),组件渲染其 DOM。但是,我是 ngOnChanges()` 函数,我看到它永远不会执行。对这种行为进行单元测试的正确方法是什么?

这是我的组件:

组件模板:

这是我的单元测试:

0 投票
1 回答
1642 浏览

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中,如果我模拟数据,它会在我的子组件中正确克隆。

0 投票
0 回答
668 浏览

angularjs - 通过组件引用设置值时,Angular 2 ngOnChanges 未触发

我正在以这种方式动态创建一个组件:

如您所见,我还为“文本”属性分配了一个值。这项工作是可行的,但它不会触发目标组件中的 ngOnChanges,因此也不会触发更改检测(我采用“推送”策略)。

我试图手动触发它

但没有成功。

任何想法如何以更好的方式将新文本值分配给目标组件@Input('text')?文本只是一个字符串值。

更新: 我现在已经在目标组件中使用 setter 构建了一个工作:

它有效,但这有点hacky,我仍然更喜欢更“有角度”的方式。

0 投票
1 回答
3475 浏览

arrays - @Input() 变成子元素后数组是否变为对象?

我对 Angular 2 很陌生,我想通过 @Input() 将在父组件中创建的数组传输给它的子组件。

在父级中,我创建了数组,从服务中添加数据,并将其显示在控制台中(控制台输出 1)。然后在子组件中,我使用 ngOnChanges 再次在控制台中显示它(控制台输出 2)。正如您在下面看到的,数组的长度从 12 变为 0。我想这是因为数组在传递给子对象时变为对象?

我将如何解决这个问题?

家长

孩子

父模板

控制台输出 1 数组 [12]:[对象,对象,...]

控制台输出 2 Array[0]: [Object, Object, ... ]

0 投票
1 回答
235 浏览

angularjs - 非组件控制器中的 $onChanges

我正在使用 angular 1.5 并且我有控制器,但它不是一个组件,只是普通的控制器。我尝试在其中使用 $onChanges,但它不起作用。那么,真的可以在非组件控制器上使用 $onChanges 吗?

0 投票
1 回答
1832 浏览

angular - Angular 2 ngOnChanges 不会在快速变化的输入上触发

我正在使用 Angular 2 @Input 属性将所需的数值传递给这样的子组件。

父组件:

子组件:

在这种情况下,OnChanges 生命周期挂钩仅触发一次而不是 3 次,表明输入值从 0 更改为 3。但是我需要在每次值更改时触发它 (0 -> 1, 1 -> 2 , 2 -> 3 等)。有没有办法做到这一点?

谢谢。

0 投票
0 回答
1397 浏览

angular - 如何仅在 ngOnInit 中设置每个输入值后触发 ngOnChanges

只有在 ngOnInit 中设置了每个输入值后,我才能触发 ngOnChanges。我的代码-->

我不会在 ngonchanges 中得到我在 ngonit 中初始化的数组,因为 ngonchanges 在 ngonit 之前被调用,我如何在检查 ngonchanges 之前检查是否所有都已初始化?