时间戳

首页 > 解决方案 > Common object change in all component when one of them edit it

angular - Common object change in all component when one of them edit it

问题描述

I have :

item.ts

export interface IItem {
  name: string;
  isActive?: boolean;
}

const data: IItem[] = [
  {
    name: 'item1',
    isActive: true
  },
  {
    name: 'item2',
    isActive: true
  },
  {
    name: 'item3',
    isActive: false
  },
  {
    name: 'item4',
    isActive: true
  }
];
export default data;

I use this data in multiple component :

Component1

export class C1Component {
  items: IItem [] = items;
}

Component1

export class C2Component {
  items: IItem [] = items;
}

When I make changes in the items for example delete item in Component1, the items in the other component also changed. I can't understand why.

Does angular Objects are loosely coupled? and how can solve this issue please.

I tried also:

...
export class Menu {
  static get data() {
    return data;
  }
}

and call Menu.data, but the error persist and it is the same behavior.

标签： angular

解决方案

更改代码位置解决了我的问题，所以我所做的就是使用这样的 get 方法创建一个类：

export class ItemClass {
  static get data() {
    const data: IItem[] = [
      {
        name: 'item1',
        isActive: true
      },
      {
        name: 'item2',
        isActive: true
      },
      {
        name: 'item3',
        isActive: false
      },
      {
        name: 'item4',
        isActive: true
      }
    ];
    return data;
  }
}

在我调用的组件中items = ItemClass.data;

推荐阅读