angular - Angular 2自动对焦输入元素

如何自动对焦输入元素？与this问题类似，但与AngularDart不同。像这样:

<input type="text" [(ngModel)]="title" [focus] />
//or
<input type="text" [(ngModel)]="title" autofocus />

Angular2是否有任何对此功能的支持？

最好的关闭问题是this one，但是有没有更短/更轻松的解决方案，因为我没有“输入框列表”。在提供的链接中使用了*ngFor="#input of inputs"，但控制模板中只有1个输入。

最佳答案

这是我当前的代码:

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

@Directive({
    selector: "[autofocus]"
})
export class AutofocusDirective
{
    private focus = true;

    constructor(private el: ElementRef)
    {
    }

    ngOnInit()
    {
        if (this.focus)
        {
            //Otherwise Angular throws error: Expression has changed after it was checked.
            window.setTimeout(() =>
            {
                this.el.nativeElement.focus(); //For SSR (server side rendering) this is not safe. Use: https://github.com/angular/angular/issues/15008#issuecomment-285141070)
            });
        }
    }

    @Input() set autofocus(condition: boolean)
    {
        this.focus = condition !== false;
    }
}

用例:

[autofocus] //will focus
[autofocus]="true" //will focus
[autofocus]="false" //will not focus

过时的代码(旧答案，以防万一):
我最终得到了这段代码:

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

@Directive({
    selector: '[autofocus]'
})
export class Autofocus
{
    constructor(private el: ElementRef, private renderer: Renderer)
    {
    }

    ngOnInit()
    {
    }

    ngAfterViewInit()
    {
        this.renderer.invokeElementMethod(this.el.nativeElement, 'focus', []);
    }
}

如果我将代码放入ngOnViewInit中，它将无法正常工作。代码也使用最佳实践，因为直接调用focus元素不是recommended。

编辑(有条件自动对焦):
几天前，我需要有条件的自动对焦，因为我隐藏了第一个自动对焦元素，并且想对另一个自动对焦，但是只有当第一个不可见时，我才用以下代码结束:

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

@Directive({
    selector: '[autofocus]'
})
export class AutofocusDirective
{
    private _autofocus;
    constructor(private el: ElementRef, private renderer: Renderer)
    {
    }

    ngOnInit()
    {
    }

    ngAfterViewInit()
    {
        if (this._autofocus || typeof this._autofocus === "undefined")
            this.renderer.invokeElementMethod(this.el.nativeElement, 'focus', []);
    }

    @Input() set autofocus(condition: boolean)
    {
        this._autofocus = condition != false;
    }
}

编辑2:
Renderer.invokeElementMethod is deprecated和新的Renderer2不支持它。
因此，我们回到了本机焦点(这在DOM外部不起作用-例如SSR!)。

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

@Directive({
    selector: '[autofocus]'
})
export class AutofocusDirective
{
    private _autofocus;
    constructor(private el: ElementRef)
    {
    }

    ngOnInit()
    {
        if (this._autofocus || typeof this._autofocus === "undefined")
            this.el.nativeElement.focus();      //For SSR (server side rendering) this is not safe. Use: https://github.com/angular/angular/issues/15008#issuecomment-285141070)
    }

    @Input() set autofocus(condition: boolean)
    {
        this._autofocus = condition != false;
    }
}

用例:

[autofocus] //will focus
[autofocus]="true" //will focus
[autofocus]="false" //will not focus