如何在以角度打开扩展面板时自动聚焦扩展面板中的编辑器内容?

Question

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

我需要将羽毛笔编辑器的重点放在扩展面板上。

<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 编辑器中添加一个 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();
}
}

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