Question

我具有以下Angular 2组件，并且需要ID textarea的{{1}}一经显示（bannernote）就被聚焦

isEditEnabled

我尝试使用上面显示的“ onshow”和“ onload”事件来实现这一目标，但没有成功

我还在此方法中添加了代码，每当按钮从“编辑”切换为“接受”时都调用该代码，例如<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> 但这是行不通的，因为在调用时由于ngif尚未“执行”而尚未呈现该元素

document.getElementById("bannernotes").focus

Answer 1

您可以使用<p></p>访问代码中的元素。由于该元素最初可能不可用，因此将关联的属性定义为setter，然后在其中设置焦点。如@Stefan在评论中所建议，首先检查是否定义了元素引用；从视图中删除该元素后，它将变为@ViewChild。

undefined

有关演示，请参见this stackblitz。

Answer 2

使用@ViewChild()装饰器检索您的textearea元素。像这样在您的文本区域上放置一个标识符：<textarea #myTextarea></textarea>

不要忘记实现AfterViewInit接口。

 @ViewChild('myTextarea') textArea;

 ngAfterViewInit() {            
    this.textArea.focus();
 }

如何聚焦具有ngif的TextArea

2 个答案: