Angular2 - 将文本框聚焦在组件加载上 | 将文本框聚焦在组件加载上

将文本框聚焦在组件加载上

关注

发信

关注(28)粉丝(399)

Angular2 - 将文本框聚焦在组件加载上

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

问题描述

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


<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 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 元素焦点的步骤

在您的组件中导入 ViewChildren

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

为要为其设置焦点的 html 声明本地模板变量名称
实现函数 ngAfterViewInit() 或其他适当的生命周期钩子

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

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

将 #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-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 class="col-md-2 col-sm-2"><input type="button" value="Add" (click)="AddPerson()" class="btn btn-primary"/>

</表单>

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

Import ViewChildren in your Component

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

Declare local template variable name for the html for which you want to set the focus
Implement the function ngAfterViewInit() or other appropriate life cycle hooks
Following is the piece of code which I used for setting the focus
```
ngAfterViewInit() {vc.first.nativeElement.focus()}
```
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 - 将文本框聚焦在组件加载上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-02 02:46