如何在angular中打开扩展面板时自动聚焦扩展面板内容中的编辑器？

Question

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

我需要将鹅毛笔编辑器集中在扩展面板上。

<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()"，还是不行。 有人可以帮忙吗？

谢谢。

Answer 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>

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

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

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

因此，上面的代码在视图初始化后将焦点移至编辑器。