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

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。

<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文件，从角/核导入ViewChild和AfterViewInit。然后

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

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

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