gpt4 book ai didi

angular - 如何聚焦具有 ngif 的 TextArea

转载 作者:行者123 更新时间:2023-12-02 00:23:47 24 4
gpt4 key购买 nike

我有以下 Angular 2 组件,我需要 ID 为 bannernotetextarea 在它变得可见时立即聚焦(isEditEnabled)

<div class="cont-notesbanner">
<p class="triangle"></p>
<h3 class="tit-notesbanner">Add notes:</h3>

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
<p
class="p-notesbanner"
*ngIf="!isEditEnabled"
[ngClass]="currentAsset.notes.length === 0 ? 'it-place' : ''"
>
{{ currentAsset.notes.length === 0 ? "Add notes" : currentAsset.notes }}
</p>
<textarea
rows="4"
cols="50"
*ngIf="isEditEnabled"
class="txt-notesbanner"
name="bannernote"
id="bannernote"
rows="10"
[(ngModel)]="currentAsset.notes"
#bannernote
onload="$('#bannernote').focus();"
></textarea>

<div class="txt-right">
<a class="smallButton" (click)="onCloseBannernotes()">Cancel</a>
<a
class="smallButton"
(click)="onEditBannernotes()"
*ngIf="!isEditEnabled"
>Edit</a
>
<button type="submit" class="smallButton" *ngIf="isEditEnabled">
Accept
</button>
</div>
</form>
</div>

我已经尝试使用“onshow”和“onload”事件来实现这一点,但没有成功

我还在这个方法中添加了代码,每当按钮从“编辑”切换到“接受”时调用该方法,如 document.getElementById("bannernotes").focus但这不起作用,因为当调用该元素时,由于 ngif 尚未“执行”,该元素尚未呈现

onEditBannernotes() {
this.isEditEnabled = !this.isEditEnabled;
}

最佳答案

您可以使用 @ViewChild 访问代码中的元素。由于该元素最初可能不可用,因此将关联的属性定义为 setter,并在其中设置焦点。根据 @Stefan 的建议在评论中,首先检查是否定义了元素引用;当元素从 View 中移除时,它变为 undefined

// Set the focus on the textarea as soon as it is available
@ViewChild("bannernote") set bannerNoteRef(ref: ElementRef) {
if (!!ref) {
ref.nativeElement.focus() ;
}
}

参见 this stackblitz用于演示。

关于angular - 如何聚焦具有 ngif 的 TextArea,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54557400/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com