javascript - 如何使子组件检测到来自父组件的对象(@Input())在Angular中发生了变化

Question

我有一个来自父组件的对象也在子组件中接收到，类似于这样:

{
  attribute: 'aaaa',
  attribute2: [
    {
      value
    },
    {
      value
    },
    {
      value
    },
  ]
}

这个对象是一个来自父组件的@Input。当我对 attribute2 数组中的对象进行更改时，我希望子组件检测到所做的更改然后进行更新。由于这是一个对象，我无法让它工作，所以我在父组件中克隆了整个对象 (this.objet = _.cloneDeep(this.object)，这样子组件就会检测到发生了变化。

有没有其他方法可以不克隆整个对象？提前致谢

编辑:

子组件

export class ChildComponent implements OnInit, OnChanges {
  @Input() public object: any;
}

html

<div>
   <span>{{object.attribute}}</span>
   <div *ngFor="let items of object.attribute2">{{item.value}}</div>
</div>

父组件

export class ParentComponent implements OnInit {
  public object: any;

  updateObject() {
      this.object.attribute2[1] = 'Changed value';
      this.object = _.cloneDeep(this.object);
  }
}

html

<div>
   <child-component [object]="object"></child-component>
</div>

Answer 1

An efficient way is to use EventEmitter and service communication to trigger changes in the child component.

@Tony 提到的方法是使用 ngOnChanges()。这是检测绑定(bind)属性更改的一个很好的快捷方式，但是随着您添加越来越多的绑定(bind)，从长远来看，使用此 Hook 将影响您的应用程序，因为无论您是否需要它，每次任何绑定(bind)属性更改时它都会运行电话。

所以对于基于服务的通信，我创建了一个例子

• 堆栈 Blitz : https://stackblitz.com/edit/angular-fgut7t

• 要点:https://gist.github.com/stupidly-logical/a34e272156b498513505127967aec851

在此示例中，我使用 @Input() 将数组绑定(bind)到子组件，添加新数据时，父组件更新数组，并将最新值传递给服务，然后服务发出该值。子组件订阅该值并执行相关代码。

服务:

import { Injectable, EventEmitter } from '@angular/core';

@Injectable({
    providedIn: "root"
})
export class DataService {

  dataUpdated:EventEmitter<any> = new EventEmitter();

  constructor() { }

  setLatestData(data) {
    this.dataUpdated.emit(data);
  }

}

子组件 TS

import { Component, OnInit, Input } from '@angular/core';
import { DataService } from '../data-service.service';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() allData: [];
  latestData: any;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.dataUpdated.subscribe((data) => {
      this.latestData = data;
    });
  }

}

子组件 HTML

<p>
Latest Data: {{ latestData }}
</p>
<h3>List:</h3>
<li *ngFor="let data of allData">
  {{ data }}
</li>

父组件 TS

import { Component } from '@angular/core';
import { DataService } from './data-service.service'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  dataArr = [];

  constructor(private dataService: DataService){}

  onAddTimestamp() {
    let timestamp = new Date();
    this.dataArr.push(timestamp);
    this.dataService.setLatestData(timestamp);
  }

}

父组件 HTML

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<button
(click)="onAddTimestamp()"
>
  Add Timestamp
</button>
<app-child
[allData] = "dataArr"
></app-child>