代码之家 › 专栏 › 技术社区 › sosick

组件之间的角度传递函数

angular javascript

-1

sosick · 技术社区 · 6 年前

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

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

1 回复 | 直到 6 年前

SiddAjmera 6 年前

@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模板中的挂钩:

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