如何防止孩子的数据更改影响其父母？角 5答案

【问题标题】：How to prevent data changes in a child from affecting it's parent? Angular 5如何防止孩子的数据更改影响其父母？角 5
【发布时间】：2018-10-02 07:46:05
【问题描述】：

所以我有一个 Angular 应用程序，我在其中使用几个子组件为父页面“站点”构建 d3 图表。

我向父组件上的服务发出请求，这将返回一个站点对象列表，其中包含要为每个对象绘制的所有数据。我将该数据传递给 d3 图形组件。

我的问题是：当我在子组件中重组数据时，为什么它似乎覆盖了原始请求中的数据/包含这些更改（当我在父组件上 console.log 时）？我没有使用任何 @Output 装饰器。

我需要父级中的数据不受到其子级的影响...我不知道为什么会这样！如果可以，请提供帮助，如果我能澄清任何事情，请告诉我。谢谢！

这是我的文件的样子：

sites.component.ts： 我向该服务发出请求，以接收我所有网站的列表以及与它们相关的随机数据。我将它们存储在“站点”中

import { Component, Inject, OnInit, Input } from '@angular/core';
import { DataService } from '../data.service';
import { Http, Response } from '@angular/http';
import { AuthService } from "../services/auth.service";

@Component({
  selector: 'app-sitelist',
  templateUrl: './sitelist.component.html',
  styleUrls: ['./sitelist.component.css']
})
export class SitelistComponent implements OnInit {
  sites;
  constructor( private _dataService: DataService, private http: Http,  public authService: AuthService ) {
  }
ngOnInit() {
    this.authService.getSites()
    .map((res:Response) => (
       res.json() 
     ))
    .subscribe(data => {
       console.log(data)
       this.sites = data
       console.log(this.sites)
    })
  }
}

sites.component.html 我遍历每个站点以将每个站点的“摘要”组件呈现为表格行，将“站点”数据传递给每个站点

<table class="responsive-table striped">
  <tbody>
    <tr *ngFor="let site of sites">
        <app-summary [site]="site"></app-summary>
    </tr>
  </tbody>
</table>

Summary.component.ts 对于每个站点，我呈现摘要组件并通过'@Input() site;' 接受一个站点的数据价值我对其进行了重组，以便当我将其发送给子级（d3 图形组件）时，它已经可以读取到图形中。我将其存储在“site_info”中

import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
import { DataService } from '../data.service';
import { Http } from '@angular/http';
import * as d3 from 'd3';
import { AuthService } from "../services/auth.service"; 
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-summary',
  templateUrl: './summary.component.html',
  styleUrls: ['./summary.component.css'],

})
export class SummaryComponent implements OnInit, AfterViewInit {
  @Input() site;

constructor(private activatedRoute: ActivatedRoute,private _dataService: DataService, private http: Http, public authService: AuthService, private router:Router ) {}
date: Date;
dates: any;
value: Number;
eachobj: any;
data: any;
average: any;
site_info: any;

ngAfterViewInit(){

}
ngOnInit() {

this.data = this.site
console.log(this.site)

this.dates = Object.keys(this.data.historical_data)
this.site_info = Object.keys(this.data.historical_data).map(key=>this.data.historical_data[key])

this.site_info = this.site_info.map((obj, i) => {
  if (!obj) {
    return {
      id: this.site.id,
      name: this.site.name,
      date: this.dates[i]};
  }
  obj.id = this.site.id,
  obj.name = this.site.name,
  obj.date = this.dates[i];
  return obj;
 });
}

summary.component.html 这是我将 site_info 数据发送到更多子组件以绘制它的地方。这些本质上是“site.component.ts”文件的孙子组件。

 <td id="td3">
   <app-precipitation [site1]="site_info"></app-precipitation>
</td>
<td id="td4">
   <app-volume [site1]="site_info"></app-volume>
</td>

【问题讨论】：

标签： angular typescript

【解决方案1】：

您可能想尝试在ngOnInit 中复制site：

this.data = Object.assign({}, this.site);

【讨论】：

这需要在我的父组件中的 ngOnInit 中进行，然后再将其传递下去吗？还是在我从父级收到子组件后？
我会尝试一个然后另一个，看看是否/什么对你有用:)

【解决方案2】：

解决方法之一是复制对象：

export class SitelistComponent implements OnInit {
sites;
original;

constructor(){
}   
ngOnInit() {
    this.authService.getSites()
    .map((res:Response) => (
       res.json() 
     ))
    .subscribe(data => {
       console.log(data)
       const copies = [];
       for(let item of data) {
         copy = this.copy(item);
         copies.push(copy);
       }
       this.original = data;
       this.sites = copies;
       console.log(this.sites)
    })
  }
}

copy(object: any):any{
 return JSON.parse(JSON.stringify(obj))
}

【讨论】：