要将输入数据从模态框传递给父组件,可以使用Angular的@Output()
装饰器和EventEmitter
类。以下是一个示例解决方案:
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-modal',
template: `
`
})
export class ModalComponent {
inputData: string;
@Output() dataSubmitted = new EventEmitter();
onSubmit() {
this.dataSubmitted.emit(this.inputData);
}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Submitted data: {{ submittedData }}
`
})
export class ParentComponent {
submittedData: string;
openModal() {
// 打开模态框的逻辑
}
onDataSubmitted(data: string) {
this.submittedData = data;
}
}
在上面的示例中,子组件ModalComponent
包含一个输入框和一个提交按钮。当用户点击提交按钮时,onSubmit()
方法会将输入数据通过dataSubmitted
事件发射器传递给父组件。
父组件ParentComponent
包含一个按钮,用于触发打开模态框的逻辑,并显示已提交的数据。通过监听子组件的dataSubmitted
事件,当子组件发出事件时,父组件的onDataSubmitted()
方法会被调用,将输入数据赋值给submittedData
属性。
请注意,上述示例中的模态框逻辑和具体实现是缺失的,你可能需要使用第三方库或自定义模态框组件来实现打开和关闭模态框的功能。