Angular2 - фокусування текстового поля на завантаженні компонентів

Я розробляю компонент у Angular2 (Бета 8). Компонент має текстове поле та випадаюче меню. Я хотів би встановити фокус у текстовому полі, як тільки компонент завантажується або в разі зміни спадного меню. Як би я досяг цього в angular2. Далі наводиться HTML для компонента.

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

Використання простого autofocusатрибута HTML5 працює для сценарію "при завантаженні"

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

або

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

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

Ця відповідь натхнена post post Angular 2: Зосередьтеся на нещодавно доданому елементі введення

Кроки для встановлення фокусу на елементі Html у Angular2

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, до якого ви хочете отримати доступ.

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

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

це найкращий і найпростіший спосіб, оскільки код "myInput.focus ()" запускається після створення вводу

ПОПЕРЕДЖЕННЯ: це рішення є прийнятним, лише якщо у вас є один елемент у формі (користувач не зможе вибрати інші елементи)

В оригінальному запитанні просився спосіб встановити фокус спочатку, АБО встановити фокус пізніше у відповідь на подію. Здається, правильний спосіб підійти до цього - зробити директиву атрибута, яку можна встановити для будь-якого елемента введення, а потім використовувати власну подію, щоб безпечно активувати метод фокусування на цьому елементі введення. Щоб це зробити, спочатку створіть директиву:

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 як вхід до нової директиви та викликали focus у функції стрілки, яку ми передали підписці на цю подію, елемент введення отримає фокус після ініціалізації компонента та кожного разу, коли буде викликаний setFocus

У мене була така сама потреба у власному додатку, і це спрацювало, як рекламується. Щиро дякую наступному: http://blog.thecodecampus.de/angular-2-set-focus-element/

Див. Angular 2: Зосередьтесь на нещодавно доданому елементі введення, щоб дізнатися, як встановити фокус.

Для завантаження використовуйте ngAfterViewInit()зворотний виклик життєвого циклу.

У мене була трохи інша проблема. Я працював із входами в модальному режимі, і це зводило мене з розуму. Жодне із запропонованих рішень не спрацювало для мене.

Поки я не знайшов цю проблему: https://github.com/valor-software/ngx-bootstrap/issues/1597

Цей хороший хлопець підказав мені, що модальний ngx-bootstrap має конфігурацію фокусування. Якщо для цієї конфігурації не встановлено значення false, модаль буде сфокусований після анімації, і НЕМАЄ ШЛЯХА сфокусувати щось інше.

Оновлення:

Щоб встановити цю конфігурацію, додайте наступний атрибут до модального 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', []);
    }
}

Крім того, це можна робити динамічно так ...

<input [id]="input.id" [type]="input.type" [autofocus]="input.autofocus" />

Де вхід

const input = {
  id: "my-input",
  type: "text",
  autofocus: true
};

Директива про перше поле автофокусування

import {
  Directive,
  ElementRef,
  AfterViewInit
} from "@angular/core";

@Directive({
  selector: "[appFocusFirstEmptyInput]"
})
export class FocusFirstEmptyInputDirective implements AfterViewInit {
  constructor(private el: ElementRef) {}
  ngAfterViewInit(): void {
    const invalidControl = this.el.nativeElement.querySelector(".ng-untouched");
    if (invalidControl) {
      invalidControl.focus();
    }
  }
}

Мені не пощастило з багатьма з цих рішень у всіх браузерах. Це рішення допомогло мені.

Для змін маршрутизатора:

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

Тоді ngAfterViewInit()для сценарію завантаження.

Ви можете використовувати $ (jquery):

<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="txtname`enter code here`" 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>

то в ts:

    declare var $: any;

    @Component({
      selector: 'app-my-comp',
      templateUrl: './my-comp.component.html',
      styleUrls: ['./my-comp.component.css']
    })
    export class MyComponent  {

    @ViewChild('loadedComponent', { read: ElementRef, static: true }) loadedComponent: ElementRef<HTMLElement>;

    setFocus() {
    const elem = this.loadedComponent.nativeElement.querySelector('#txtname');
          $(elem).focus();
    }
    }