Angular2 - Фокусировка текстового поля на нагрузке компонента

Ответ 1

Этот ответ вдохновлен post Angular 2: Фокусировка на вновь добавленном элементе ввода

Шаги для установки фокуса на элемент HTML в Angular2

• Импортировать элементы ViewChildren в свой компонент

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

• Объявить имя локальной переменной шаблона для html, для которого вы хотите установить фокус

• Реализуйте функцию ngAfterViewInit() или другие подходящие крючки жизненного цикла.

• Ниже приведен фрагмент кода, который я использовал для установки фокуса

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

• Добавить атрибут #input к элементу DOM, к которому вы хотите получить доступ.

///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>

Ответ 2

Использование простого атрибута autofocus HTML5 работает для сценария "при загрузке"

 <input autofocus placeholder="enter text" [(ngModel)]="test">

или

<button autofocus (click)="submit()">Submit</button>

http://www.w3schools.com/TAgs/att_input_autofocus.asp

Ответ 3

Первоначальный вопрос задал вопрос о том, как выбрать исходный фокус, ИЛИ установить фокус позже в ответ на событие. Похоже, что правильный подход к этому заключается в создании директивы атрибута, которая может быть задана для любого элемента ввода, а затем для использования настраиваемого события для безопасного запуска метода фокусировки для этого элемента ввода. Для этого сначала создайте директиву:

import { Directive, Input, EventEmitter, ElementRef, Renderer, Inject } from '@angular/core';

@Directive({
    selector: '[focus]'
})
export class FocusDirective {
    @Input('focus') focusEvent: EventEmitter<boolean>;

    constructor(@Inject(ElementRef) private element: ElementRef, private renderer: Renderer) {
    }

    ngOnInit() {
        this.focusEvent.subscribe(event => {
            this.renderer.invokeElementMethod(this.element.nativeElement, 'focus', []);
        });
    }
}

Обратите внимание, что он использует renderer.invokeElementMethod для nativeElement, который безопасен веб-работником. Также обратите внимание, что focusEvent объявляется как вход.

Затем добавьте следующие объявления к компоненту Angular 2, у которого есть шаблон, в котором вы хотите использовать новую директиву для установки фокуса на входной элемент:

public focusSettingEventEmitter = new EventEmitter<boolean>();

ngAfterViewInit() { // ngOnInit is NOT the right lifecycle event for this.
    this.focusSettingEventEmitter.emit(true);
}
setFocus(): void {
  this.focusSettingEventEmitter.emit(true);
}

Не забывайте импортировать EventEmitter над компонентом, как это:

import { Component, EventEmitter } from '@angular/core';

и в шаблоне для этого компонента установите новый атрибут [focus] следующим образом:

<input id="name" type="text" name="name" 
    [(ngModel)]="person.Name" class="form-control"
    [focus]="focusSettingEventEmitter">

Наконец, в вашем модуле импортируйте и объявите новую директиву следующим образом:

import { FocusDirective } from './focus.directive';

@NgModule({
    imports: [ BrowserModule, FormsModule ],
    declarations: [AppComponent, AnotherComponent, FocusDirective ],
    bootstrap: [ AppComponent ]
})

Напомним: функция ngAfterViewInit вызовет появление нового события EventEmitter, и поскольку мы присвоили этому эмиттеру атрибут [focus] во входном элементе нашего шаблона, и мы объявили этот EventEmitter как вход в новую директиву и вызывается метод фокуса в функции стрелки, который мы передали подписке на это событие, элемент ввода получит фокус после инициализации компонента и всякий раз, когда вызывается функция setFocus.

У меня была такая же потребность в моем собственном приложении, и это работало так, как было объявлено. Большое вам спасибо: http://blog.thecodecampus.de/angular-2-set-focus-element/

Ответ 4

См. Angular 2: сосредоточьтесь на новом добавленном элементе ввода для настройки фокуса.

Для "при загрузке" используйте обратный вызов жизненного цикла ngAfterViewInit().

Ответ 5

У меня была немного другая проблема. Я работал со входами в модальном, и это сводило меня с ума. Никакие предлагаемые решения не работали для меня.

Пока я не нашел эту проблему: https://github.com/valor-software/ngx-bootstrap/issues/1597

Этот хороший парень дал мне подсказку, что ngx-bootstrap modal имеет конфигурацию фокуса. Если эта конфигурация не установлена ​​в значение "ложь", модальность будет сфокусирована после анимации, и нет НИКАКИХ способов сосредоточиться на чем-либо еще.

Update:

Чтобы установить эту конфигурацию, добавьте следующий атрибут в модальный div:

[config]="{focus: false}"

Обновление 2:

Чтобы усилить фокус на поле ввода, я написал директиву и задал фокус в каждом цикле AfterViewChecked, если поле ввода имеет класс ng-нетронутый.

 ngAfterViewChecked() {
    // This dirty hack is needed to force focus on an input element of a modal.
    if (this.el.nativeElement.classList.contains('ng-untouched')) {
        this.renderer.invokeElementMethod(this.el.nativeElement, 'focus', []);
    }
}