contentEditable.focus 在 mat 菜单中启用 contenteditable 时需要 setTimeout 才能工作
contentEditable.focus needs setTimeout to work when contenteditable enabled in a mat menu
这是我的 html:
<span #myspan [contenteditable]="editable">
...
<mat-menu #appMenu="matMenu">
<ng-template matMenuContent>
<button mat-menu-item (click)="setEditiable()">
<mat-icon>edit</mat-icon>
<span i18n>Edit</span>
</button>
</ng-template>
</mat-menu>
这是我的 ts:
setEditable(){
this.editable = true;
console.log(this.myspan.nativeElement.contentEditable); //false
this.changeDetector.detectChanges();
console.log(this.myspan.nativeElement.contentEditable); //true
this.myspan.nativeElement.focus();
}
此代码不起作用,但是将 focus()
行包装在 setTimeout
中,则可以。此外,如果启用按钮不在 mat-menu
中,它也可以正常工作而无需 setTimeout。
哦,我正在使用 @ng-stack/contenteditable 启用 contenteditable
原因是 mat-menu
组件会在菜单关闭后立即将焦点恢复到触发按钮。这意味着您的焦点方法没有效果,因为它会立即被覆盖。
在 setTimeout
中包装焦点方法解决了问题,因为现在您可以在恢复焦点后调用焦点。
另一个解决方案是说 Angular mat-menu 不通过在触发器上使用 [matMenuTriggerRestoreFocus]="false"
来恢复焦点:
<button mat-icon-button [mat-menu-trigger-for]="appMenu" [matMenuTriggerRestoreFocus]="false"
这是我的 html:
<span #myspan [contenteditable]="editable">
...
<mat-menu #appMenu="matMenu">
<ng-template matMenuContent>
<button mat-menu-item (click)="setEditiable()">
<mat-icon>edit</mat-icon>
<span i18n>Edit</span>
</button>
</ng-template>
</mat-menu>
这是我的 ts:
setEditable(){
this.editable = true;
console.log(this.myspan.nativeElement.contentEditable); //false
this.changeDetector.detectChanges();
console.log(this.myspan.nativeElement.contentEditable); //true
this.myspan.nativeElement.focus();
}
此代码不起作用,但是将 focus()
行包装在 setTimeout
中,则可以。此外,如果启用按钮不在 mat-menu
中,它也可以正常工作而无需 setTimeout。
哦,我正在使用 @ng-stack/contenteditable 启用 contenteditable
原因是 mat-menu
组件会在菜单关闭后立即将焦点恢复到触发按钮。这意味着您的焦点方法没有效果,因为它会立即被覆盖。
在 setTimeout
中包装焦点方法解决了问题,因为现在您可以在恢复焦点后调用焦点。
另一个解决方案是说 Angular mat-menu 不通过在触发器上使用 [matMenuTriggerRestoreFocus]="false"
来恢复焦点:
<button mat-icon-button [mat-menu-trigger-for]="appMenu" [matMenuTriggerRestoreFocus]="false"