javascript - Angular 6 - MatDialog - EventEmitter - 从 MatDialog 将对象共享给父组件
问题描述
现在能够在两个组件之间进行通信。但不知道如何通过事件发射器将用户(选定的)输入值作为对象从 MatDialog 组件传递给父组件。在这里,我想在单击提交按钮后将选定的选项值和文本区域值作为对象传递。
对话框.html
<mat-select [(ngModel)]="selectedIssue" [ngModelOptions]="{standalone: true}">
<mat-option [value]="option1">Option AA</mat-option>
<mat-option [value]="option2">Option BB</mat-option>
<mat-option [value]="option3">Option CC</mat-option>
<mat-option [value]="option4">Option DD</mat-option>
<mat-option [value]="option5">Option EE</mat-option>
</mat-select>
<div>
<textarea class="mention-reason" [(ngModel)]="reason" [ngModelOptions]="{standalone: true}"></textarea>
</div>
<button class="cancel" matDialogClose>Cancel</button>
<button class="submit" [mat-dialog-close] (click)="submitUserReason()">Submit</button></span>
对话框.ts
onSubmitReason = new EventEmitter();
submitUserReason(): void {
this.onSubmitReason.emit('hello');
}
onConfirmClick(): void {
this.dialogRef.close(true);
}
父.ts
callSupport() {
const dialogRef = this.dialog.open(customerSupportComponent);
const subscribeDialog = dialogRef.componentInstance.onSubmitReason.subscribe((data) => {
console.log('dialog data', data);
//i can see 'hello' from MatDialog
});
dialogRef.afterClosed().subscribe(result => {
subscribeDialog.unsubscribe();
});
非常感谢帮助的人。
解决方案
我假设有两个按钮。1) 提交 2) 关闭
因此,如果您想在提交按钮上单击父组件中的选定数据,那么,
submitUserReason(): void {
this.dialogRef.close({ option: userSelectedOption, reason:userReason });
}
在父组件中,
dialogRef.afterClosed().subscribe(result => {
console.log(result);
});
推荐阅读
- teradata - 替换存储过程失败,易失性表不存在
- html - 滚动时如何创建 Elm Lang 事件?
- node.js - 找不到模块“lru-cache”
- java - Java web 抓取它的内容,但只抓取 body 样式,然后不要退出并永远运行
- html - 如何从 Quizlet 打印索引卡片大小的抽认卡?
- ios - Obj-C - 按字符串中的日期对表格视图数据进行排序?
- python - 如果在异常后不重置,ContextVar 会在异步逻辑中泄漏内存吗?
- python - Clean Architecture 中的实体可以使用边界对象吗?
- .net-core - 控制台中的CSP报告:如何通过.net代码关闭,浏览器控制台中登录的csp报告
- composer-php - 我试图在我的 laravel 6 项目中运行这个“composer require mckenziearts/laravel-notify”,但我收到了这个错误