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

использовать простой autofocus атрибут HTML5 работает для сценария "on load"

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

или

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

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

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

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', []);
        });
    }
}

обратите внимание, что он использует визуализации.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 как вход в новую директиву и вызвали метод focus в функции стрелки, которую мы передали подписке на это событие, элемент ввода получит Фокус после инициализации компонента и всякий раз, когда setFocus призванный.

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

<input id="name" type="text" #myInput />
{{ myInput.focus() }}

Это самый лучший и простой способ, потому что код "myInput.focus () " выполняется после ввода создан

посмотреть угловые 2: фокус на вновь добавленный элемент input как установить фокус.

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

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

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

этот хороший парень дал мне подсказку, что NGX-bootstrap modal имеет конфигурацию фокуса. Если для этой конфигурации не задано значение false, то модальный режим будет сфокусирован после анимации и нет Способ сосредоточиться на чем-то другом.

обновление:

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

[config]="{focus: false}"

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

чтобы заставить фокус на поле ввода, я написал директиву и установил фокус в каждом цикле Afterverviewchecked, пока поле ввода имеет класс 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', []);
    }
}

мне не очень повезло со многими из этих решений на всех браузерах. Это решение, которое сработало для меня.

для изменения маршрутизатора:

router.events.subscribe((val) => {
    setTimeout(() => {
        if (this.searchElement) {
            this.searchElement.nativeElement.focus();
        }
    }, 1);
})

затем ngAfterViewInit() для сценария onload.