以编程方式聚焦并选择 angular2 材料设计输入

Question

使用具有以下模式的 angular2 和 angular2-material：

<form #userForm="ngForm" style="background-color: rgba(209,216,239,0.29)" layout-padding="20px">
        <div layout="row" layout-margin>
          <md-input-container flex>
            <input md-input
                   #eAccountName
                   #cAccountName="ngModel"
                   type="text"
                   placeholder="Account Name"
                   [(ngModel)]="accountName"
                   name="accountname"
                   maxlength="50"
                   [disabled]="!isEditable"
                   required>
          </md-input-container>
        </div>
</form>

如何以编程方式聚焦此（或任何其他）输入元素？如果可能的话，我还想在获得焦点后选择文本字段的内容。

谢谢。

Answer 1

您可以使用文档中显示的 md-input 组件中的 focus 方法

https://material.angular.io/components/input/api

<span (click)="myinput.focus()">Focus it!</span>
<md-input-container class="example-full-width">
    <input mdInput #myinput>
</md-input-container>

从班级内部集中注意力：

export class AppComponent {
    @ViewChild('myinput') articleInput;
    someMethod() {
        this.articleInput.nativeElement.focus();
    }
}

来自 cmets 的更新，感谢 khoailang

您可以在短时间内使用超时设置焦点，以确保视图已初始化，并自动聚焦所需的输入

export class MyDemoComponent implements AfterViewInit {
    interval: Subscription;
    @ViewChild('viewInputName') input;

    ngAfterViewInit() {
        this.interval = Observable.interval(750).subscribe(x => {
            this.input.nativeElement.focus();
            this.interval.unsubscribe();
        });
    }
}

永远记得取消订阅间隔。