Как автоматически сфокусировать редактор в содержимом панели расширения при открытии панели расширения в angular?

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-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 и импортируйте ViewChild и AfterViewInit из angular/core. затем

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

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

Таким образом, приведенный выше код перемещает фокус в редактор после инициализации представления.