Угловая - проходная функция между компонентами

Question

Вот мой скелет проблемы: https://stackblitz.com/edit/angular-jk8dsj

У меня есть две проблемы в этой задаче:

1. Я хочу добавить элемент в app.component, когда янажав на кнопку из key-value.component.Я не знаю как это сделать.Я пытаюсь передать с помощью @Output () декоратор, бо не получилось.Я думаю, что я думаю, что это должно быть что-то вроде:

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

2. Позже я хочу отправить этот массив значений на сервер.На данный момент в моем компоненте приложения функция помещает элементы в массив со значениями emty Element: key: '' и value: ''.Как сделать так, чтобы значения в таблице соответствовали введенным значениям ввода?Я пытаюсь использовать ngModel, но значения, заполненные после пустого элемента значения толкают в массив.Нужно ли создавать еще один массив, который создается при отправке всей страницы и отправке данных на сервер?

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);
  }

}

Прослушайте эти Output хуки в вашей ParentComponent TemplatE:

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

Вот Обновленный StackBlitz для вашей ссылки.