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。

首先将一个ID添加到quil-editor-#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();
  }
}

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

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

1 个答案: