Angular:具有注入子组件的结构指令不会通过指令的@Input()更改该组件的onChanges

时间:2019-05-30 12:35:46

标签: angular

您好,我目前不得不编写一个结构指令,该指令将动态创建并注入具有输入且具有ChangeDetectionStrategy.onPush的子组件。到目前为止,插入操作可以按预期使用,因为我可以使用组合键ViewDetectorRef.createComponentRenderer2的{​​{1}}中的元素注入正确的位置。

就像其他任何组件或指令一样,我希望如果我有输入并且它们发生更改,则UI应该根据更改后的输入刷新自身。在这种情况下,从理论上讲,我应该能够使用appendChildMethod更新子组件的输入,并手动执行更新,并且组件UI应该自行更新。

但是,对于我们使用ngOnChanges()的所有组件,上述更新似乎无法正常工作,并且UI保持不变,就好像它完全没有变化一样。

我在组件上没有使用ChangeDetectionStrategy.onPush的情况下尝试了相同的代码,并且它们按预期更新。

在我手动更新输入并且它们再次无法更改UI之后,我还尝试使用ChangeDetectionStrategy.onPush的{​​{1}}方法。

我创建了一个简单的示例,该示例模拟了当前的问题,显示了非常相似的指令设置以及用于增加子组件中的计数的按钮。预期当您单击“增量”按钮时,子注入组件内部的计数应自行更新,以使计数每次增加1。

我有2个版本:

  1. https://stackblitz.com/edit/updating-input-inside-inject-child-compoennt-no-cd-onpush?file=app%2Ffoo.directive.ts-在没有changeDetectorRef
  2. 的情况下具有预期的结果
  3. https://stackblitz.com/edit/updating-input-inside-inject-child-compoennt-with-cd-onpush?file=app%2Fapp.component.ts-结果与预期不符,并且使用了markForCheck()

对此ChangeDetectionStrategy.onPush的一些帮助或解释,可以解决该问题。

谢谢。

0 个答案:

没有答案