从 app.component 将值推送到 home.component 中的数组答案

【问题标题】：push values to array in home.component from app.component从 app.component 将值推送到 home.component 中的数组
【发布时间】：2021-05-19 19:19:58
【问题描述】：

我想将信息推送到 app.component 之外的组件中的数组中

我这里有一个例子：https://stackblitz.com/edit/angular-ivy-b4bgzr?file=src%2Fapp%2Fapp.component.html 但是推送没有用。

这是否可以将信息推送到数组中，例如来自 app.component 的 home.component？

【问题讨论】：

你好，曼努埃尔。您想从应用组件更新数据到主组件吗？对吗？
嗨，是的，在这个例子中是正确的。也许我在某些情况下需要它（从例如 home 组件更新应用程序组件中的数据）

标签： angular typescript

【解决方案1】：

StackBlitz Demo 中的工作演示

基本上，您需要在两个组件之间进行通信，为此service 用于两个组件之间更好的通信。现在，所有相关的数据数组都将被放入服务中，您需要将此服务注入所有相关的组件中。

Data-Service.ts

@Injectable()
export class DataService {
   equipment: any[] = [
    {
      ID: 1,
      Name: 'Test-Equip1'
    },
    {
      ID: 2,
      Name: 'Test-Equip2'
    }
  ];
  constructor() {}
  updateEquipment(newRecord: any) {
    this.equipment = [...this.equipment, newRecord];
  }
}

现在，首先将这个服务注入到 home.component 中，然后你会在 home.component 中获取数据数组的值

export class HomeComponent implements OnInit {
  equipment = this.dataService.equipment;
  constructor(private dataService: DataService) {}
}

现在，同样在 app.component 中注入服务并将对象推送到数据服务数组，这也会将其反映到主组件。

export class AppComponent implements OnInit {
   equip: string = '';
   equipment: any[] = [];
   
   constructor(private dataService: DataService) {}

   ngOnInit() {
     this.equipment = this.dataService.equipment;
   }
   
   AddEquip() {
      this.dataService.updateEquipment({ ID: 3, Name: this.equip });
      this.equipment.push({ ID: 3, Name: this.equip });
      this.equip = '';
   }
}

这样你可以在不注入组件的情况下更新你的数据。

【讨论】：

【解决方案2】：

您可以使用装饰器@Input，您的代码如下所示：

1- home.component

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  @Input() equipment: any[] = [];
  constructor() {}

  ngOnInit() {
  }
}

2- app.component

import { Component, VERSION, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;
  equip: string = '';
  equipment: any[] = [];
  constructor() {}

  ngOnInit() {}
  AddEquip() {
    this.equipment.push({ ID: 3, Name: this.equip });
    this.equip = '';
  }
}

3- app.component html

<input type="text" (keydown.enter)="AddEquip()" [(ngModel)]="equip" /><br /><br /><br /><br /><br /><br />
App-Component: {{ equipment | json }}
<br /><br /><br /><br /><br /><br />
<app-home [equipment]="equipment"></app-home>

【讨论】：