角度 - 组件之间的传递函数答案

【问题标题】：Angular - passing function between components角度 - 组件之间的传递函数
【发布时间】：2018-11-24 12:11:00
【问题描述】：

这是我的问题框架：https://stackblitz.com/edit/angular-jk8dsj

我在这个任务中有两个问题：

当我单击 key-value.component 中的按钮时，我想在 app.component 中添加元素。我不知道怎么做。我正在尝试使用 @Output() 装饰器传递，但它不起作用。我认为它必须是这样的：
```
<app-key-value [elements]="values"
       (addElemToParentArray)="???"
       (rmElemFromParentArray)="???"></app-key-value>
```
稍后我想将此值数组发送到服务器。现在，在我的应用程序组件函数中，使用 emty 元素值将元素推送到数组：键：'' 和值：''。如何使表格中的值与输入的输入值相对应？我正在尝试使用 ngModel，但是在将空值元素推送到数组之后填充的值。我是否必须创建另一个在提交整个页面并将数据发送到服务器时创建的数组？

【问题讨论】：

【解决方案1】：

在子组件上创建两个@Output 属性，然后像这样使用它们：

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

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

  @Output() addClicked: EventEmitter<any> = new EventEmitter<any>();
  @Output() removeClicked: EventEmitter<any> = new EventEmitter<any>();
  @Input() elements;
  key: '';
  value: '';

  constructor() { }

  ngOnInit() {
  }

  addElemToParentArray(event) {
    this.addClicked.emit();
  }

  rmElemFromParentArray(element) {
    this.removeClicked.emit(element);
  }

}

在您的 ParentComponent TemplatE 中收听这些 Output 钩子：

<app-key-value 
  [elements]="values"
  (removeClicked)="remove($event)"
  (addClicked)="addElement()">
</app-key-value>

同样在子组件中，使用这样的模板：

<button (click)="addElemToParentArray($event)">Add</button>
<div *ngFor="let element of elements">
  <label>key</label>
  <input [(ngModel)]="element.key" type="text"/>
  <label>value</label>
  <input [(ngModel)]="element.value" type="text"/>
  <button (click)="rmElemFromParentArray(element)">Remove</button>
</div>

这里有一个Updated StackBlitz 供您参考。

【讨论】：