如何自动将扩展面板内容中的编辑器聚焦到以角度打开扩展面板？

【问题标题】：How to automatically focus the editor in the expansion panel content on open of expansion panel in angular?如何自动将扩展面板内容中的编辑器聚焦到以角度打开扩展面板？
【发布时间】：2020-06-26 11:22:17
【问题描述】：

我有一个带有“写响应”标题的扩展面板。打开扩展面板时，我有一个羽毛笔编辑器。

我需要让羽毛笔编辑器专注于扩展面板。

<mat-expansion-panel #panel1>
<mat-expansion-header> <span>"Write a Response"</span> </mat-expansion-header>
<quill-editor [ngModel]="htmlText" (onContentChanged)="onContentChanged($event)" placeholder="placeholder"></quill-editor>
</mat-expansion-panel>

我试过自动对焦，cdkFocusInitial，(focus)="myMethod()"，还是不行。有人可以帮忙吗？

谢谢。

【问题讨论】：

标签： angular quill autofocus mat-expansion-panel

【解决方案1】：

要实现这一点，您必须使用@ViewChild。

首先给 quil-editor 添加一个 id - #editor

<mat-expansion-panel #panel1>
<mat-expansion-header> <span>"Write a Response"</span> </mat-expansion-header>
<quill-editor #editor [ngModel]="htmlText" (onContentChanged)="onContentChanged($event)" placeholder="placeholder"></quill-editor>
</mat-expansion-panel>

然后转到 ts 文件并从 angular/core 导入 ViewChild 和 AfterViewInit。那么

export class ComponentName implement AfterViewInit{
@ViewChild('editor') editorElementRef : ElementRef;

  ngAfterViewInit(){
    this.editorElementRef.nativeElement.focus();
  }
}

所以上面的代码，一旦视图被初始化，就将焦点移到编辑器上。

【讨论】：

试过这个，它的工作，但不像预期的那样。它将鹅毛笔编辑器聚焦一次，然后焦点回到扩展面板。所以我无法直接在编辑器中开始输入。