Angle中的自定义组件不会更新

时间:2018-12-06 10:43:22

标签: angular typescript angular6

我正在尝试学习Angular(Angular 6),并且创建了两个组件component-acomponent-b。在component-a的模板中,我像这样使用component-b

<component-b [configuration]="selectedConfiguration" *ngIf="selectedConfiguration != null">
    </component-b>

其中selectedConfigurationcomponent-a的属性,用作component-b的输入。

我希望,如果在component-a的控制器中给selectedConfiguration分配一个新值,就像这样:

this.selectedConfiguration = newConfig;

将使用新配置作为输入重新创建component-b的实例,就像在基础数组中添加/删除/替换项目的情况下,在ngIf中发生的情况一样。相反,如果我向selectedConfiguration分配新对象,则什么也不会发生。

我在做什么错了?

2 个答案:

答案 0 :(得分:0)

您可以尝试使用组件b:

export class component-b {
  @Input() configuration: any;

  <some methods with configuration>

}

答案 1 :(得分:0)

正在回答,因为通过评论找到了解决方案。

多亏了NicolasLaw-Dune,我解决了这个问题:我的印象是,更改component-a中的值会创建一个具有新值的component-b新实例,但是错误。相反,它只是更新component-b的现有实例内部的值。知道了这一点,我通过在component-b中实现了OnChanges接口,检查更改后的值是否是我的输入属性并相应地更新了组件,来更改了component-b中的代码以对更改做出反应。