Javascript 如何将子组件数据传递到父组件

我有3个组件，2个子组件和1个父组件。 我在父组件中有“保存”按钮，为了在父组件中获取子数据，我尝试了以下方法：

<div class="border border-dark p-1 m-1">
  <basic-details
    *ngIf="customerData"
    [formType]="formType"
    [customerDetails]="customerData"
    #customerDetails
  ></basic-details>
</div>
<div class="border border-dark p-1 m-1">
  <verification-details
    *ngIf="customerData"
    [formType]="formType"
    [customerDetailsForKyc]="customerData"
    #customerDetailsForKyc
  ></verification-details>
</div>

<div class="row main justify-content-center">
  <button class="btn btn-primary" (click)="save(customerDetails, customerDetailsForKyc)">Save</button>
  <button class="btn btn-primary ml-2" (click)="cancel()">Cancel</button>
</div>

对于

basic details

组件，我在单击保存按钮时在父组件中获得了正确的数据，但是对于

verification details

我得到了以下错误：

在这两个子组件中，我使用@Input（）获取数据，如下所示：

对于基本组件：

用于验证组件

---

我做错了什么吗？

我有一个代码的工作示例，两个孩子和一个家长。正如您在问题中所描述的，我在代码中使用了几乎类似的东西。您没有提到

[formType]=“formType”

，这就是我没有使用它的原因。请检查我的密码。它正在StackBlitz中工作==>

从'@angular/core'导入{Component，Input，Output，EventEmitter}；
@组成部分({
选择器：'应用程序根'，
模板：`



父项：{{message}}


拯救
`,
})
导出类AppComponent{
公共消息：字符串；
公共消息2：字符串；
customerData:ICCustomerDetailsData={颜色：'TTT'，宽度：15}；
恩戈尼尼特（）{
this.message='原始消息'
this.message2='Original message2'
}
保存（基本，kyc）{
console.log（'basic'，basic）；
console.log（'kyc'，kyc）；
}
}
@组成部分({
选择器：“应用程序子项”，
模板：`Children:{data}}




点击我`
})
导出类子组件{
@Input（）公共数据：字符串；
@Input（）customerDetails:ICCustomerDetailsData；
@Output（）dataChange=neweventemitter（）；
changeMessage（消息：字符串）{
这个.data=消息；
this.dataChange.emit（this.data）；
}
}
@组成部分({
选择器：“app-children2”，
模板：`Children:{data}}
点击我`
})
导出类ChildComponentNew{
@Input（）customerDetailsForKyc；
@Input（）公共数据：字符串；
@Output（）dataChange=neweventemitter（）；
changeMessage（消息：字符串）{
这个.data=消息；
this.dataChange.emit（this.data）；
}
}
接口ICCustomerDetailsData{
颜色？：字符串；
宽度？：数字；
}

原文

您的方法：

save（customerDetails，customerDetailsForKyc）”

用作参数模板变量。这是错误的，因为它们有其他目标。 “模板变量可帮助您在模板的另一部分中使用来自模板一部分的数据。使用模板变量，您可以执行响应用户输入或微调应用程序表单等任务。”

如果您想在父组件中发送数据（将子组件数据传递到父组件），那么使用to decorator@Output

---

从子组件到父组件获取数据的另一个选项是使用@ViewChild decorator将子组件注入到父组件。因此，当单击“保存”按钮时，您应该能够获取子组件的数据。检查

您是否可以为两个子组件共享TS和html？我已经为您尝试过，但它对我的两个子组件都有效。请让我知道。你能给我每个的3个ts文件吗component@Linker添加请检查，我做错了什么吗？@techguy我恐怕这还不足以了解所有情况，如果您可以共享文件的所有内容，那会更好。不过，请尝试添加：icCustomerDetailsData；另外，对于第二次输入，您有cr更改消息（）在子组件中，但我在子组件中没有任何按钮，我想在不单击子组件中的任何按钮的情况下获取子组件的数据，我在父组件中只有保存按钮component@techguy您不需要任何

我对@Output做的操作，但是，在我的子组件中没有按钮，我只有一个save按钮父组件，单击该保存按钮，我希望获取所有子组件数据
save(basic, kyc) {
    console.log('basic', basic);
    console.log('kyc', kyc);
  }

@Input() customerDetails: ICustomerDetailsData;

@Input() customerDetailsForKyc;

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

@Component({
  selector: 'app-root',
  template: `<app-children [(data)]="message"  
              [customerDetails]="customerData"
              #customerDetails></app-children>
             <br><br>
             <app-children2 [(data)]="message2" 
              
             [customerDetailsForKyc]="customerData"
             #customerDetailsForKyc></app-children2>
            <div>Parent: {{message}}
            <br>
            <button class="btn btn-primary" (click)="save(customerDetails, customerDetailsForKyc)">Save</button>
            </div>`,
})

export class AppComponent {
  public message: string;
  public message2: string;
  customerData:ICustomerDetailsData={color:'TTT',width:15};
  ngOnInit() {
    this.message = 'Original message'
    this.message2 = 'Original message2'
  }
  save(basic, kyc) {
    console.log('basic', basic);
    console.log('kyc', kyc);
  }
}

@Component({
  selector: 'app-children',
  template: `<div>Children: {{data}}</div> 
              <br>
              <input type="text" class="form-control" id="name"
     
              [(ngModel)]="data" >
              <br>
             <a (click)="changeMessage('Children message')">Click me!</a>`
})

export class ChildComponent {
  @Input() public data: string;
  @Input() customerDetails: ICustomerDetailsData;
  @Output() dataChange= new EventEmitter<string>();
  changeMessage(message: string) {
    this.data = message;
    this.dataChange.emit(this.data);
  }
}

 @Component({
  selector: 'app-children2',
  template: `<div>Children: {{data}}</div> 
             <a (click)="changeMessage('Children message')">Click me!</a>`
})

export class ChildComponentNew {
    @Input() customerDetailsForKyc;
  @Input() public data: string;
  @Output() dataChange= new EventEmitter<string>();
  changeMessage(message: string) {
    this.data = message;
    this.dataChange.emit(this.data);
  }
}
interface ICustomerDetailsData {
  color?: string;
  width?: number;
}