Angular2 - 将文本框聚焦在组件加载上 [英] Angular2 - Focusing a textbox on component load

查看：24
本文介绍了Angular2 - 将文本框聚焦在组件加载上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在 Angular2(Beta 8)中开发一个组件.该组件有一个文本框和一个下拉菜单.我想在加载组件或下拉列表的更改事件后立即在文本框中设置焦点.我将如何在 angular2 中实现这一点.以下是组件的 Html.

<form role="form" class="form-horizo​​ntal"><div [ngClass]="{showElement:IsEditMode, hidden:!IsEditMode}"><div class="form-group"><label class="control-label col-md-1 col-sm-1" for="name">Name</label><div class="col-md-7 col-sm-7"><input id="name" type="text" [(ngModel)]="person.Name" class="form-control"/>
<div class="col-md-2 col-sm-2"><input type="button" value="Add" (click)="AddPerson()" class="btn btn-primary"/>

<div [ngClass]="{showElement:!IsEditMode, hidden:IsEditMode}"><div class="form-group"><label class="control-label col-md-1 col-sm-1" for="name">Person</label><div class="col-md-7 col-sm-7"><select [(ngModel)]="SelectedPerson.Id" (change)="PersonSelected($event.target.value)" class="form-control"><option *ngFor="#item of PeopleList" value="{{item.Id}}">{{item.Name}}</option></选择>

</表单>

解决方案

这个答案的灵感来自帖子 Angular 2:关注新添加的输入元素

在 Angular2 中设置 Html 元素焦点的步骤

  1. 在您的组件中导入 ViewChildren

    import { Input, Output, AfterContentInit, ContentChild,AfterViewInit, ViewChild, ViewChildren } from 'angular2/core';

  2. 为要为其设置焦点的 html 声明本地模板变量名称

  3. 实现函数 ngAfterViewInit() 或其他适当的生命周期钩子

  4. 以下是我用来设置焦点的代码

    ngAfterViewInit() {vc.first.nativeElement.focus()}

  5. 将 #input 属性添加到要访问的 DOM 元素.

////这是打字稿导入 {组件，输入，输出，AfterContentInit，ContentChild，AfterViewChecked, AfterViewInit, ViewChild,ViewChildren} 来自angular2/core"；导出类 AppComponent 实现 AfterViewInit,AfterViewChecked {@ViewChildren('input') vc;ngAfterViewInit() {this.vc.first.nativeElement.focus();}}

<form role="form" class="form-horizo​​ntal"><div [ngClass]="{showElement:IsEditMode, hidden:!IsEditMode}"><div class="form-group"><label class="control-label col-md-1 col-sm-1" for="name">Name</label><div class="col-md-7 col-sm-7"><input #input id="name" type="text" [(ngModel)]="person.Name" class="form-control"/>
<div class="col-md-2 col-sm-2"><input type="button" value="Add" (click)="AddPerson()" class="btn btn-primary"/>

<div [ngClass]="{showElement:!IsEditMode, hidden:IsEditMode}"><div class="form-group"><label class="control-label col-md-1 col-sm-1" for="name">Person</label><div class="col-md-7 col-sm-7"><select [(ngModel)]="SelectedPerson.Id" (change)="PersonSelected($event.target.value)" class="form-control"><option *ngFor="#item of PeopleList" value="{{item.Id}}">{{item.Name}}</option></选择>

</表单>

I am developing a component in Angular2 (Beta 8). The component has a textbox and a dropdown. I would like to set the focus in textbox as soon as component is loaded or on change event of dropdown. How would I achieve this in angular2. Following is Html for the component. 

<div>
    <form role="form" class="form-horizontal ">        
        <div [ngClass]="{showElement:IsEditMode, hidden:!IsEditMode}">
            <div class="form-group">
                <label class="control-label col-md-1 col-sm-1" for="name">Name</label>
                <div class="col-md-7 col-sm-7">
                    <input id="name" type="text" [(ngModel)]="person.Name" class="form-control" />

                </div>
                <div class="col-md-2 col-sm-2">
                    <input type="button" value="Add" (click)="AddPerson()" class="btn btn-primary" />
                </div>
            </div>
        </div>
        <div [ngClass]="{showElement:!IsEditMode, hidden:IsEditMode}">
            <div class="form-group">
                <label class="control-label col-md-1 col-sm-1" for="name">Person</label>
                <div class="col-md-7 col-sm-7">
                    <select [(ngModel)]="SelectedPerson.Id"  (change)="PersonSelected($event.target.value)" class="form-control">
                        <option *ngFor="#item of PeopleList" value="{{item.Id}}">{{item.Name}}</option>
                    </select>
                </div>
            </div>
        </div>        
    </form>
</div>

解决方案

This answer is inspired by post Angular 2: Focus on newly added input element

Steps to set the focus on Html element in Angular2

  1. Import ViewChildren in your Component

    import { Input, Output, AfterContentInit, ContentChild,AfterViewInit, ViewChild, ViewChildren } from 'angular2/core';

  2. Declare local template variable name for the html for which you want to set the focus

  3. Implement the function ngAfterViewInit() or other appropriate life cycle hooks

  4. Following is the piece of code which I used for setting the focus

    ngAfterViewInit() {vc.first.nativeElement.focus()}

  5. Add #input attribute to the DOM element you want to access.

///This is typescript
import {Component, Input, Output, AfterContentInit, ContentChild,
  AfterViewChecked, AfterViewInit, ViewChild,ViewChildren} from 'angular2/core';

export class AppComponent implements AfterViewInit,AfterViewChecked { 
   @ViewChildren('input') vc;
  
   ngAfterViewInit() {            
        this.vc.first.nativeElement.focus();
    }
  
 }

<div>
    <form role="form" class="form-horizontal ">        
        <div [ngClass]="{showElement:IsEditMode, hidden:!IsEditMode}">
            <div class="form-group">
                <label class="control-label col-md-1 col-sm-1" for="name">Name</label>
                <div class="col-md-7 col-sm-7">
                    <input #input id="name" type="text" [(ngModel)]="person.Name" class="form-control" />

                </div>
                <div class="col-md-2 col-sm-2">
                    <input type="button" value="Add" (click)="AddPerson()" class="btn btn-primary" />
                </div>
            </div>
        </div>
        <div [ngClass]="{showElement:!IsEditMode, hidden:IsEditMode}">
            <div class="form-group">
                <label class="control-label col-md-1 col-sm-1" for="name">Person</label>
                <div class="col-md-7 col-sm-7">
                    <select [(ngModel)]="SelectedPerson.Id"  (change)="PersonSelected($event.target.value)" class="form-control">
                        <option *ngFor="#item of PeopleList" value="{{item.Id}}">{{item.Name}}</option>
                    </select>
                </div>
            </div>
        </div>        
    </form>
</div>

这篇关于Angular2 - 将文本框聚焦在组件加载上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆