Как вы получаете данные из поля ввода в диалоге материала Angular?
Это мой код:
TS
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-test',
templateUrl: './foo.component.html',
styleUrls: ['./foo.component.scss']
})
export class SomeComponent implements OnInit {
name: String;
constructor(public dialog: MatDialog) { }
ngOnInit() {
}
openDialog(): void {
const dia = this.dialog.open(SomeDialogComponent, {
width: "250px",
data: { name: this.name }
});
dia.afterClosed().subscribe(result => {
console.log("The dialog was closed");
console.log("Your Name: " + this.name);
this.name = result;
});
}
}
@Component({
selector: "someDialog",
templateUrl: "someDialog.html",
styleUrls: ["someDialog.scss"]
})
export class SomeDialogComponent {
constructor(public dialog: MatDialogRef<SomeDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
onNoClick(): void {
this.dialog.close();
}
}
Диалог HTML
<body>
<h1 mat-dialog-title>Enter your name</h1>
<div mat-dialog-content class="contentBox">
<mat-form-field>
<input type="text" matInput>
</mat-form-field>
<div mat-dialog-actions>
<button mat-raised-button (click)="onNoClick()">Exit</button>
<button mat-raised-button (click)="sendData()">Ok</button>
</div>
</div>
</body>
Я получил этот код из официальной документации Angular, https://material.angular.io/components/dialog/overview,, но он не работает должным образом.
Ожидаемое
Я хочу, чтобы диалоговое окно передавало данные обратно компоненту без использования модели, просто как переменную, которую я вставил в мой фрагмент.
Фактический
Диалог не передает данные обратно компоненту и возвращает undefined вместо этого при регистрации.