如何解决当对话框打开时,就地编辑自动启动 - Angular Material
我有一个 Angular 应用程序,用户可以在其中单击一个按钮,打开一个对话框。在打开对话框时,我已将 textarea
修改为 contenteditable
属性,以便可以就地编辑文本。
<textarea contenteditable>Click me to edit</textarea>
我遇到的问题是,当打开对话框时,可编辑文本会在编辑模式下自动打开(如 textarea
内容周围的彩色线条和闪烁的输入光标所示)。任何想法为什么会发生这种情况?
Stackblitz 是 here。只需单击“打开对话框”按钮即可重现问题。
解决方法
原因是这段代码:
<textarea contenteditable>Click me to edit</textarea>
如果你用绑定将 textarea 更改为 div,如下所示:
<div [contentEditable]="edit">
Edit this content to add your own quote
</div>
那么该属性是可绑定的。
import { Component,Inject,Input } from '@angular/core';
import { MatDialogRef,MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-example-dialog',templateUrl: 'example-dialog.component.html',})
export class ExampleDialogComponent {
// just use the input decorator here
@Input("edit") edit:boolean = true;
constructor(
public dialogRef: MatDialogRef<ExampleDialogComponent>,@Inject(MAT_DIALOG_DATA) public data: any) { }
onNoClick(): void {
this.dialogRef.close();
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。