Question

我通过服务与我的组件共享对象数组。所以在一瞬间我想用一个新对象的属性替换一个数组对象的属性（我替换对象）。所以我的共享对象应该在使用它的所有模板中更新。

https://plnkr.co/edit/0sRxSivEaEPLsNAJo7MV?p=preview

// my.component.ts
@Component({ 
selector: 'my-component',
template: '<div>MyComponent: {{item.name}}</div>',
})
export class MyComponent implements OnInit {
  constructor(private myService: MyService) {}

  private item = myService.myListData[0];

  ngOnInit() {
    // 1. - This triggers change detection in app.ts template
    this.item.name = 'Name 1111';

    setTimeout(() => {
      // 2. - This doesn't trigger change detection in app.ts template
      let newObj = {name: 'Name 222', age: 225};
      this.item = newObj;
    }, 3000);
  }
}

在我的情况下// 1在app.ts和my.component.ts中更改模板值，但是// 2仅在my.component.ts中触发更改

我想知道为什么// 2不会更新app.ts模板并且有没有办法在不通过对象属性循环的情况下执行此操作？

更新我设法通过使用Object.assign（）来解决我的问题。更换物体时没有变化检测。

setTimeout(() => {
  // 2. - This doesn't trigger change detection in app.ts template
  let newObj = {name: 'Name 222', age: 225};
  Object.assign( this.item , newObj);
}, 3000);

Answer 1

我认为OP希望将多个视图绑定到相同的服务数据。这是一个plunker（改良海报的原创），展示了如何做到这一点。基本上将视图绑定到同一服务成员而不是组件的个人成员。这样更改就会自动反映在所有类似的绑定中。

https://plnkr.co/edit/PNQmLarmP3g7j7f42cXD?p=preview

@Component({ 
    selector: 'my-component',
    template: '<div>MyComponent: {{myService.Item.name}}</div>',
})
export class MyComponent implements OnInit {
   constructor(private myService: MyService) {}

   private item = myService.myListData[0];

   ngOnInit() {
     // 1. - This triggers change detection
     this.item.name = 'Name 1111'
     this.myService.Item = this.item;

     setTimeout(() => {
       // 2. - This doesn't trigger change detection in app.ts template
       let newObj = {name: 'Name 222', age: 225};
       this.myService.Item = newObj;
     }, 3000);
   }
}

关于这个主题，我总是想知道是否有办法实现相同的目的，并创建一个服务成员的引用，如在组件HTML中使用的短手。

Item = Alias of MyService.Item ;

，HTML只会绑定到

{{Item}}

Answer 2

我知道这是一个古老的问题，但是我遇到了一个问题，即变更检测未“正确”运行，或者至少在我预期的时候。

在我的情况下，分配一个我正在监视的变量，我们将其称为oldValue，但并未触发更改检测。这就是我最初的想法：

// INCORRECT APPROACH
oldValue = newValue

如OP的 Updated ... 部分所述，一个好的解决方案是使用Object.assign()：

// CORRECT APPROACH
Object.assign(oldValue, newValue)

在这种情况下（以我的经验），更改检测将在oldValue上运行。

干杯！

为什么替换对象不会触发Angular2中的变化检测？

2 个答案: