英文:
Angular: How do I define a default value when I close the Mat Dialog by clicking outside of the dialog
问题
当对话框被点击外部关闭时，我想要发出一个默认值。当前情况下，它会发出undefined，这在许多情况下是可以接受的，但当对话框被点击外部中止时，我想要发出一个默认值。
我该如何实现这种行为？
这里是一个实际示例：
https://material.angular.io/components/dialog/examples
- 打开对话框。
- 在对话框中输入一些内容。
- 再次打开它。
- 点击外部，观察消失的值。
我希望它的行为是什么？
当对话框被点击外部关闭时，它应该始终显示一些默认值。
英文:
I want to emit a default value, when the dialog is closed by clicking outside of the dialog. Currently it emits undefined which is okay for many situations, but I want to emit a default value when the dialog was aborted by clicking outside.
How do I achieve this behavior?
Here is an actual example:
https://material.angular.io/components/dialog/examples
- Open the dialog.
- Type somthing in the dialog.
- Open it again.
- Click outside of it and look at the disappearing value
How do I want it to behave?
It should always show up some values when the dialog was closed by clicking outside.
答案1
得分: 6
使用backdropClick可观察对象，它在点击覆盖层时会发出信号。
然后使用MatDialogRef实例来访问close方法，该方法接受可选参数。使用它来提供值。
尝试这样做
component.ts
dialogRef.backdropClick().subscribe(v => {
dialogRef.close('你好！');
});
dialogRef.afterClosed().subscribe(result => {
console.log('对话框已关闭');
this.animal = result;
});
英文:
>Use backdropClick observable that emits when the overlay's backdrop has been clicked
Then use MatDialogRef instace to accesss close method which accepts optional argument. Use that to provide value
Try this
component.ts
dialogRef.backdropClick().subscribe(v=>{
dialogRef.close('Hello!');
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.animal = result;
});
答案2
得分: 0
根据示例，您可以添加一个OR运算符：
dialogRef.afterClosed().subscribe(result => {
console.log('对话框已关闭');
this.animal = result || defaultValue;
});
英文:
based on the example, you can add an OR operator :
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.animal = result || defaultValue;
});
答案3
得分: 0
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.animal = result;
});
在这段代码中，result 会自动被覆盖为 undefined。
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
if(!!result){
this.animal = result;
}
});
英文:
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.animal = result;
});
In this code the result is automatically overwritten with undefined.
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
if(!!result){
this.animal = result;
}
});
答案4
得分: 0
这是我在Angular 9中使用的很好的解决方案 ->
addNew() {
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
const dialogRef = this.dialog.open(AddDialogComponent, dialogConfig);
}
英文:
Here is my solution who working great in Angular 9 ->
addNew() {
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
const dialogRef = this.dialog.open(AddDialogComponent, dialogConfig);
}
答案5
得分: 0
你可以在DialogComponent的构造函数中注入dialogRef，
constructor(
private dialogRef: MatDialogRef<DialogComponent>
){}
然后在对话框内部，你可以设置对backdropClick的订阅，
this.dialogRef.backdropClick().subscribe(() => {
this.dialogRef.close(this.result || this.defaultValue);
});
通过这样的方式，你现在可以像平常一样从对话框外部订阅afterClosed了。
英文:
You can inject the dialogRef in the constructor of the DialogComponent,
constructor(
private dialogRef: MatDialogRef<DialogComponent>
){}
And then within your dialog you can set up the subscription to backdropClick
this.dialogRef.backdropClick().subscribe(()=>{
this.dialogRef.close(this.result || this.defaultValue);
});
With that you should now be able to subscribe to afterClosed from outside the dialog as normal
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论