4

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

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);
4

2 回答 2

2

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

就我而言，分配我正在观察的变量，我们称之为oldValue，并没有触发更改检测。这就是我最初的方式：

// INCORRECT APPROACH
oldValue = newValue

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

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

在这种情况下（根据我的经验），更改检测将在oldValue.

干杯!

于 2019-03-21T23:11:19.910 回答
0

我认为 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}}
于 2018-01-29T09:52:06.913 回答