通过@Output 传递数据对象

Question

我没有收到任何错误，但数据没有传递到父组件。我这样做的方式与我在网上找到的所有示例有点不同，所以我已经不太确定我是如何设置它的。这是到目前为止的代码。

我在 Child Component

中是怎么称呼它的

//a variable that stores the fetched data from a group of radio buttons
selected = {value1: '', value2: ''};

//the output variable
@Output() selectedO: EventEmitter<any> = new EventEmitter();

public sendAnswer = (): void => {
     this.selectedO.emit(this.selected);
 }

Child Component 模板中的输入

<input type="radio"
    [attr.name]  = "quesForm.value.name"
    [attr.id]    = "ans.id"
    [attr.value] = "ans.answer"
    (click)      = "getSelected(ans)" //fetches data I want to pass
    (click)      = "sendAnswer()"    //sets fetched data to @Output
    hidden
/>

我如何在 Parent Component 模板中调用它

<multiple-choice-radio *ngIf="expbTrigger"
    [question]="question01"
    (selectedO)="selectedI" //where I'm trying to pull the data into parent component
 ></multiple-choice-radio>

我如何在 Parent Component

中调用它

public selectedI(selected) {
    this.selectedII = selected;
}

selectedII: any; //the variable I'm trying to store it into

这是我可以合理化以尝试使这一切正常运行的最佳方式。我在这里做错了什么？

Answer 1

如果您提供字段或方法名称，事件绑定不会分配或调用，它只会执行表达式。因此，表达式需要包含赋值或调用。 $event 引用发出的值。

(selectedO)="selectedI = $event" // field

或

(selectedO)="selectedI($event)" // method

通过@Output 传递数据对象

passing data object through @Output

angular2-components

angular2-output

angular