Question

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

产品component.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>

产品component.ts

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

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

ProductVariant component.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 component.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
}

Answer 1

尝试这样：

Working Demo

product.component.html

（onVariantChange）=“ variant = $ event”

ClassLibrary1

product-variant.component.html

（ngModelChange）=“ onChange（）

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

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

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

Answer 2

您可以相应地更改代码

产品component.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>

产品component.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 component.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)
  }
}

Angular Guid component-interaction

希望这会有所帮助..！

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

Answer 3

有多种方法。

您可以按如下所述使用服务和依赖项注入：

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

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

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

将数据从一个组件发送到表单中的另一个组件

3 个答案: