输入位于模态对话框内。我不知道为什么它不起作用。我查看了官方文档，它列出了可以传递给元素的焦点，但它没有起作用？
有谁知道原因吗？
<form class="example-form">
<md-input-container class="example-full-width" style="width: 300px; padding: 5px; border-radius: 10px;">
<input mdInput type="email" name="to" placeholder="Email">
<md-error></md-error>
</md-input-container>
<md-input-container focus focused>
<input mdInput type="text" name="a" placeholder="zzzz" focus focused (focus)="">
</md-input-container>
</form>
focused是一个驱动mdInputContainer上mat-focused类的属性。你可以使用它来判断输入框是否获得了焦点，但无法使用它来改变焦点状态。
- focus是mdInput上的一个方法，可让你以编程方式将焦点放在输入框上。你可以使用类似于ViewChild('myInput')的内容作为myInput，并调用myInput.focus()。
但最简单的实现方式是使用标准的autofocus属性:<md-input-container>
<input mdInput type="text" name="a" placeholder="zzzz" autofocus>
</md-input-container>
<form class="example-form">
<md-input-container class="example-full-width" style="width: 300px; padding: 5px; border-radius: 10px;">
<input mdInput #emailInput="matInput" type="email" name="to" placeholder="Email">
<md-error></md-error>
</md-input-container>
</form>
然后在控制器中：
@ViewChild('emailInput') searchInput: MatInput;
....
ngAfterViewInit() {
this.emailInput.focus();
}
this.emailInput.focus()的作用实际上是"elementRef.nativeElement.focus()"，具体可以参考以下链接:
https://github.com/angular/material2/blob/master/src/lib/input/input.ts#L287因此，您也可以自己这样做:
this.emailInput.nativeElement.focus()
我曾经也遇到过同样的问题。当我使用F6快捷键打开对话框时，输入框无法获得焦点。后来发现，我没有阻止F6默认的行为，而F6会高亮显示浏览器的URL地址栏，从而夺走了焦点。
switch (event.keyCode) {
case 117:
event.preventDefault();
this.openAddAveragesDialog();
break;
default:
return;
}
<md-input-container> <input mdInput [focus]="true" [numberOnly]="true"/></md-input-container>
**编辑：根据@ Mackelito的建议，添加指令代码以提高清晰度。
以下是我编写的指令，使用了我上面链接的答案。请注意，material已将其标签标签更改为<input matInput>而不是<input md-input>
import {Directive, ElementRef, Inject, Input, OnChanges, OnInit, Renderer} from '@angular/core';
@Directive({
selector: '[focus]'
})
export class FocusDirective implements OnChanges, OnInit {
@Input()
focus: boolean;
constructor(@Inject(ElementRef) private element: ElementRef, public renderer: Renderer) {}
ngOnInit() {
this.renderer.invokeElementMethod(this.element.nativeElement, 'focus', []);
}
public ngOnChanges() {
this.element.nativeElement.focus();
}
}
通常情况下，您可以使用模板标记设置焦点，而无需任何TypeScript代码。但是对于Dialog，您需要使用@Mackelito的解决方案，使用@ViewChild和ngAfterViewInit（）。
我必须在Menu中获取焦点在TextArea上，当该Menu出现时。幸运的是，Menu有一个（menuOpened）事件可以绑定。
<button mat-stroked-button color="accent" [matMenuTriggerFor]="addMenu"
(menuOpened)="newTypes.focus()">
Add
<mat-icon class="dyna-dropdown-arrow">arrow_drop_down</mat-icon>
</button>
<mat-menu #addMenu="matMenu" [overlapTrigger]="false">
<form [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" novalidate (keydown.tab)="$event.stopPropagation()">
<mat-form-field appearance="outline" (click)="$event.stopPropagation(); false;">
<mat-label>New Pay Types</mat-label>
<textarea #newTypes rows="6" matInput placeholder="New Pay Types" [formControl]="formGroup.controls['payTypes']" required></textarea>
<mat-hint>Enter multiple Pay Types, separated by newlines</mat-hint>
<mat-error *ngIf="formGroup.controls['payTypes'].invalid">Required</mat-error>
</mat-form-field>
<div fxLayout="row-reverse" fxLayoutGap="8px" fxLayoutAlign="start center">
<button mat-stroked-button color="accent" type="submit" [disabled]="!formGroup.valid">Add</button>
<button mat-button type="button">
Cancel
</button>
</div>
</form>
</mat-menu>
(menuOpened)="newTypes.focus()"，我们可以看到 newTypes 是一个附加到我想要聚焦的 TextArea 的 TemplateRef 变量，标记为 <textarea #newTypes。
这里有一张屏幕截图，显示了我的菜单打开并立即将焦点放在其中的 TextArea 上。
尝试在设置输入获取焦点之前添加一些延迟。我已经将此行为制作成指令供您参考。
delay-focus.ts
import { Directive, Input, ElementRef } from '@angular/core';
@Directive({
selector: '[delayFocus]'
})
export class DelayFocusDirective {
@Input() delayFocusInterval;
@Input() set delayFocus(condition: boolean) {
if (condition) {
console.log(this.delayFocusInterval);
setTimeout(() => {
this.el.nativeElement.focus();
}, this.delayFocusInterval | 500);
}
}
constructor(private el: ElementRef) { }
}
例子
<input type="text" placeholder="Delay 100ms to get focus" delayFocus="true" delayFocusInterval="100">
focused="true"。 - Edric