Angular - 在一个组件中更改的常量反映在另一个组件中

问题描述

我在三个组件中使用了一个名为 MaxRecordValues 的常量值。所以我在一个通用的 constant.ts 文件中声明了它。

export const MaxRecordValues = [
  {
    value: 10,isChecked: false,},{
    value: 25,{
    value: 50,isChecked: true,{
    value: 100,];

我已在每个组件中将其指定为 maxRecords = MaxRecordValues; 此常量用于显示带有单选按钮选项的下拉列表。 value 表示下拉列表中的值，isChecked 用于显示启用的选项，使用

<input type="checkBox"
       [(ngModel)] = dataItem.isChecked>

Dropdown image reference

默认情况下将选择 50，如果我们单击任何值，maxRecords 中的特定 isChecked 会被指定为 true，并且该值将在 UI 中显示为已启用。但问题是，如果我使用其局部变量 maxRecords 更改一个组件中的任何值，那么公共常量 MaxRecordValues 也会更改，因此在第一个组件中选择的值也在第二个组件中启用和第三个组件。这三个组件都写在同一个文件夹中，并且有一个共同的父组件。是因为这种父子关系还是有其他原因？如何防止在另一个组件中反映更改的值？

解决方法

防止这个问题非常简单。在您使用它的每个组件中克隆您的对象。就这样：

maxRecords = JSON.parse(JSON.stringify(MaxRecordValues));

通过这种方式，您可以创建一个具有自己的对象引用且不连接到其他组件中的类似对象的克隆。

angular components components constants