在表单中将数据从一个组件发送到另一个组件答案

【问题标题】：Send data from one component to another within form在表单中将数据从一个组件发送到另一个组件
【发布时间】：2019-10-23 11:22:12
【问题描述】：

如何将数据从一个组件发送到另一个组件？我有两个组件，我正在使用选择器在第一个组件中显示 html，现在我想将表单中输入的数据发送到第一个组件。

产品组件.html

<form id="form" #form="ngForm" (ngSubmit)="onSubmit(form)">
  <label>
  <div class="field-heading">Name</div>
    <input type="text" [(ngModel)]="product.name" name="productName" class=" theme-input" id="text" 
placeholder="Enter product name">
  </label>
  <product-variant> </product-variant>
</form>

产品组件.ts

export class ProductComponent implements OnInit{
 variant = new Variant();
 product= new Product();
 constructor() { }
 ngOnInit() {

 }
onSubmit(){
   console.log(this.product);
   console.log(this.variant);
}

ProductVariant 组件.html

<label>
  <div class="field-heading">Starting Inventory</div>
  <input type="text"  [(ngModel)]="variant.reorderLevel" name="reorder" class=" theme-input" id="text" 
placeholder=" Starting Inventory">
</label>

ProductVariant 组件.ts

import { Component, OnInit, ViewChild } from '@angular/core';
@Component({
templateUrl: 'product-variant.component.html',
selector: 'product-variant'  
 })
export class ProductVariant implements OnInit {
variant = new Variant();
// send data from this component to the product
}

【问题讨论】：

标签： angular typescript

【解决方案1】：

试试这样：

Working Demo

product.component.html

(onVariantChange)="variant = $event"

<form id="form" #form="ngForm" (ngSubmit)="onSubmit(form)">
    <label>
<div class="field-heading">Name</div>
<input type="text" [(ngModel)]="product.name" name="productName" class=" theme-input" id="text" 
placeholder="Enter product name">
</label>
    <product-variant (onVariantChange)="variant = $event"> </product-variant>
</form>


-----------------------------------------
product : {{product | json}}
variant : {{variant | json}}

product-variant.component.html

(ngModelChange)="onChange()

<label>
  <div class="field-heading">Starting Inventory</div>
  <input type="text"  [(ngModel)]="variant.reorderLevel" name="reorder" class=" theme-input" id="text" 
placeholder=" Starting Inventory" (ngModelChange)="onChange()">
</label>

product-variant.component.ts

onChange() { this.onVariantChange.emit(this.variant) }

  @Output() onVariantChange = new EventEmitter();



  onChange() {
    this.onVariantChange.emit(this.variant)
  }

【讨论】：

感谢您的回答，但问题是我得到以下格式的输出。 Variant {reorderLevel: "1"} Variant {reorderLevel: "12"} Variant {reorderLevel: "123"} 有没有办法在单个对象中获得完整的输出
你能fork我的demo并分享一下吗
别介意我的代码有错误，你的解决方案是有效的。谢谢
不客气。如果有帮助，请投票并接受答案:)

【解决方案2】：

您可以相应地更改代码

产品组件.html

<form id="form" #form="ngForm" (ngSubmit)="onSubmit(form)">
 <label>
 <div class="field-heading">Name</div>
<input type="text" [(ngModel)]="product.name" name="productName" class=" theme-input" id="text" 
placeholder="Enter product name">
</label>
<product-variant (variant)=getVariantvalue($event)> </product-variant>
</form>

产品组件.ts

export class ProductComponent implements OnInit{
 variant = new Variant();
 product= new Product();
 constructor() { }
 ngOnInit() {

 }
onSubmit(){
   console.log(this.product);
   console.log(this.variant);
}
getVariantvalue($event){
  this.variant = $event
}
}

ProductVariant 组件.ts

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

@Component({
  templateUrl: 'product-variant.component.html',
  selector: 'product-variant'
})
export class ProductVariant implements OnInit {
  @Output()
  returnVariant: EventEmitter<Variant> = new EventEmitter();
  variant = new Variant();

// send data from this component to the product
  returnVariant() {
    returnVariant.emit(variant)
  }
}

角度指导component-interaction

希望这会有所帮助..！

更新： 您也可以使用以下方法找到详细答案：https://stackoverflow.com/a/58450327/4593145

【讨论】：

你正在使用一个名为returnVariant()的函数，你在哪里调用这个函数？
你可以在像<input type="text" [(ngModel)]="variant" name="reorder" class=" theme-input" id="text" placeholder=" Starting Inventory" (ngModelChange)="returnVariant($event)"> 987654326@这样的veriant输入变化时使用它
它工作正常，但问题是如果我在输入字段中输入 123，那么输出就像这样 Variant {reorderLevel: "1"} Variant {reorderLevel: "12"} Variant {reorderLevel: “123”}
如果您可以在产品变体组件中实现 onChange 方法，例如 onChange() { this.returnVariant.emit(this.variant) }

【解决方案3】：

有多种方法。

您可以使用这里描述的服务和依赖注入：

https://angular.io/guide/architecture-services

您可以使用 Observables，尤其是“主题”： https://angular.io/guide/observables-in-angular

http://reactivex.io/documentation/subject.html

【讨论】：