当对话框打开时，就地编辑自动启动 – Angular Material

Question

我有一个 Angular 应用程序，用户可以在其中单击一个按钮，打开一个对话框。打开对话框时，我将 textarea 修改为 contenteditable 属性，以便可以就地编辑文本。

<textarea contenteditable>Click me to edit</textarea>

我遇到的问题是，当打开对话框时，可编辑文本会自动以编辑模式打开（如 textarea 内容周围的彩色线条和闪烁的输入光标所示）。知道为什么会这样吗？

Stackblitz 是 here。只需单击“打开对话框”按钮即可重现问题。

Answer 1

原因是这段代码：

<textarea contenteditable>Click me to edit</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();
  }

}

当对话框打开时，就地编辑自动启动 – Angular Material

Edit in Place initiates automatically when Dialog Box opened – Angular Material

dialog

angular-material

angular