组件之间的角度传递功能

Question

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

我在此任务中遇到两个问题：

1. 当我从key-value.component中单击按钮时，我想在app.component中添加元素。我不知道怎么做。我正在尝试使用@Output（）装饰器传递，但是它没有用。我认为我必须像这样：

   <app-key-value [elements]="values"
          (addElemToParentArray)="???"
          (rmElemFromParentArray)="???"></app-key-value>
   

2. 稍后，我想将此值数组发送到服务器。现在，在我的应用程序组件函数中，将元素推入具有Empty元素值的数组：元素值：键：''和值：”。如何使表格中的值与输入的输入值相对应？我正在尝试使用ngModel，但是将空values元素填充到数组后填充的值。我是否需要创建另一个在提交整个页面并将数据发送到服务器上创建的数组？

Answer 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>

这里是供您参考。