Question

在我的角度项目中，使用角度材料并使用垫选择。 Mat-select是我的案例中表单的第一个元素，它在页面成功加载时设置了自动聚焦，但是我无法在mat-select上设置自动聚焦。任何人都可以帮助我找到在mat-select中设置自动对焦的方法。

@ViewChild("name") nameField: ElementRef;

ngOninit() {
  this.nameField.nativeElement.focus();
}

html

<div>
 <mat-select [(ngModel)]="nameField" #name>
    <mat-option *ngFor="let option of options2" [value]="option.id">
      {{ option.name }}
    </mat-option>
 </mat-select>
</div>

Answer 1

尝试在MatSelect上使用viewChild来访问焦点属性，然后将onInit设置为true。

<mat-form-field>
  <mat-select #mySelect [(ngModel)]="nameField">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }} 
    </mat-option>
  </mat-select>
</mat-form-field>

和ts文件导入import { MatSelect } from '@angular/material';

import { MatSelect } from '@angular/material';

export class SelectExample implements OnInit {
  @ViewChild(MatSelect) mySelect: MatSelect;

  ngOnInit() {
    this.mySelect.focused = true;
  }  
}

Answer 2

如果我对它的理解正确，那么您想将选择元素放在负载上。在这种情况下，您的代码就可以了，您只需要将焦点逻辑移至另一个生命周期事件

ngAfterViewInit

HTML：

<mat-select #fff>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
</mat-select>

TS：

export class SelectOverviewExample  implements AfterViewInit{
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  @ViewChild("fff", {static: false}) nameField: ElementRef;

  ngAfterViewInit() {
    this.nameField.focused = true;
  }
}

找到工作演示here。您可以看到select突出显示。注释ngAfterViewInit（）内的代码，并查看此区别。

Answer 3

您可以使该示例适合您自己的项目。单击按钮将成为焦点。

focusing on form elements the Angular way

Answer 4

您可以将重点放在OnInit

ts：

 options2 = ['A', 'B'];

  @ViewChild('name')
  nameField: MdSelect;

  ngOnInit() {
    setTimeout(() => {
      this.nameField.open();
    }, 0);
  }

html：

<div>
<md-select [(ngModel)]="nameField" #name>
    <md-option *ngFor="let option of options2" [value]="option.id">{{ option }}</md-option>
</md-select>

编辑：对不起，我认为您无法从mat-select和md-select获得 nativeElement 。您需要获取对象并调用open()。工作项目here in stackblitz

Answer 5

这是在Google上显示的第一个匹配项，我将提供我发现的内容：

请注意，我专门针对mat-select进行了此操作，因为没有 real 内部html元素可以将引用附加到。

我发现有效的方法是通过view-child获得对该元素的引用，然后调用

reference._elementRef.nativeElement.focus();

希望这可以帮助至少一个人：）

Answer 6

HTML：

<mat-select #someRef >
    <mat-option *ngFor="let item of items;" [value]="item">
    {{item.name}}
    </mat-option>
</mat-select>

.ts：确保您导入 MatSelect

import { MatSelect } from '@angular/material';

@ViewChild('someRef') someRef: MatSelect;


ngOnInit() {
    this.someRef.focus();
}

希望这会有所帮助。

Answer 7

首先，让我们创建指令 auto-focus.directive.ts

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

@Directive({
     selector: '[autoFocus]' }) export class AutofocusDirective implements AfterContentInit {

     public constructor(private el: ElementRef) {     
     }

     public ngAfterContentInit() {
         setTimeout(() => {
             this.el.nativeElement.focus();
         }, 500);
     }
}

接下来，我们需要告诉我们的AppModule这个新指令存在，并通过更新app.module.ts声明它的可用性：

@NgModule({
    declarations: [
        AutoFocusDirective
    ]
})

现在您可以在组件模板中使用它： app.component.html

<div> Autofocus? <input appAutoFocus> </div>

Answer 8

我们可以使用默认的角度属性进行自动对焦

<mat-form-field>
    <mat-select formControlName="xyz" cdkFocusInitial>
        <mat-option value="abc">Abc</mat-option>
    </mat-select>
</mat-form-field>

如何在垫选中设置自动对焦？

8 个答案: