如何将默认焦点设置为文本框angular2方式？

Question

尝试了html5自动对焦，但无法在Internet Explorer中使用。在组件内使用viewchildren / viewchild / elementref尝试过的解决方案，没有一个对我有效。我正在使用“@ angular / core”：“~2.2.3”。

任何人请为我提供一个有效的解决方案。

Answer 1

我找到了以下解决方案，

创建指令

 import { Component, NgModule, Directive, ElementRef, Renderer } from    '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'

 @Directive({
   selector: 'form[setFocus]'
 })
 export class SelectFirstInputDirective {

constructor(private _eRef: ElementRef, private _renderer: Renderer) { }

private _getInputElement(nativeElement: any): any {
    if (!nativeElement || !nativeElement.children) return undefined;
    if (!nativeElement.children.length && nativeElement.localName === 'input' && !nativeElement.hidden) return nativeElement;

    let input:any;

    [].slice.call(nativeElement.children).every((c:any) => {
        input = this._getInputElement(c);
        if (input) return false; // break
        return true; // continue!
    });

    return input;
}

ngAfterViewInit() {
    let formChildren = [].slice.call(this._eRef.nativeElement.children);

    formChildren.every((child:any) => {
        let input = this._getInputElement(child);

        if (input) {
            this._renderer.invokeElementMethod(input, 'focus', []);
            return false; // break!
        }
        return true; // continue!
    });
  }
}

注册指令

  @NgModule({
    imports: [
    BrowserModule],
declarations: [
    AppComponent     
    , SelectFirstInputDirective],
bootstrap: [AppComponent]
})

在表单标记

中使用它

 <form [formGroup]="someForm" (ngSubmit)="someMethod(someForm)" novalidate setFocus>

Answer 2

这对我有用[autofocus]="true"签出