gpt4 book ai didi

angular - 如何将输入值传递给父组件

转载 作者:太空狗 更新时间:2023-10-29 17:37:03 26 4
gpt4 key购买 nike

我想将输入的值传递给父组件。目前我正在从我的子组件发送整个输入的 ElementRef。有没有一种优雅的方法可以做到这一点?我的意思是,我只需要发送一个数字,而不是整个引用。

子组件:

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

@Component({
selector: 'app-action-dialog-content',
template: `
<md-input-container>
<input #amount md-input placeholder="Amount">
<span md-suffix>€</span>
</md-input-container>
`
})
export class ActionDialogContentComponent {

@ViewChild('amount') amount;

}

父组件:

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

import { ActionDialogContentComponent } from './../action-dialog-content/action-dialog-content.component';

@Component({
selector: 'app-action-dialog',
template: `
<app-action-dialog-content></app-action-dialog-content>
<md-dialog-actions>
<button md-raised-button (click)="sendData()">ADD</button>
</md-dialog-actions>
`
})
export class ActionDialogComponent {

@ViewChild(ActionDialogContentComponent) amountInput: ActionDialogContentComponent;

sendData() {
console.log(this.amountInput.amount.nativeElement.value);

}

}

最佳答案

您可以使用 angular/core 中的 EventEmitter 和 Output 将数据从子组件发射到父组件,然后父组件可以通过事件绑定(bind)处理这些数据。参见 child to parent component interaction在 Angular 2 指南中。

从你的例子:

child :

export class ActionDialogContentComponent {

amount: number;
@Output() amountChanged: new EventEmitter<number>();

changeAmount() { //Trigger this call from the child component's template
this.amountChanged.emit(this.amount);
}
}

父级(请注意,您绑定(bind)的 html 事件与子组件的 @Output 属性相匹配):

@Component({
selector: 'app-action-dialog',
template: `
<app-action-dialog-component (amountChanged)="onAmountChanged($event)"></app-action-dialog-component>
<md-dialog-actions>
<button md-raised-button (click)="sendData()">ADD</button>
</md-dialog-actions>
`
})
export class ActionDialogComponent {

onAmountChanged(amount: number) {
// do what you want with new value
}
}

关于angular - 如何将输入值传递给父组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41641257/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com