模态Angular 4中的自动对焦不起作用答案

【问题标题】：Autofocus in a modal Angular 4 doesn't work模态Angular 4中的自动对焦不起作用
【发布时间】：2017-09-29 14:41:58
【问题描述】：

我必须将输入集中在加载模式，但如果我使用 html5 属性autofocus，它似乎不起作用。有没有可能让它发挥作用？

<div class="col-md-6">
 <div class="form-group label-floating">
  <label class="control-label">
    {{'ticketbundle.busroutedetail.dialog.labels.buslinename'
     | translate }}<span class="star">*</span>
   </label><input autofocus class="form-control" id="name" required
   [(ngModel)]="busRouteDetail.name" name="name" #busRouteDetailname>
 </div>
</div>

我正在使用角材料 2

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

如果您使用的是材质对话框，您可以使用cdkFocusInitial 指定您希望初始焦点的位置。

<input cdkFocusInitial type="text">

看到这个EXAMPLE。

【讨论】：

现在已弃用，新指令称为 cdkFocusInitial。但是您知道这是否仅在使用角度材料本身的对话框组件时才有效，还是该焦点指令也应单独在任何其他模态组件上工作？我至少是这么认为的，因为它在 anguluar/cdk 包中可用，但我无法让它与 ngbootstrap modal 一起使用
我必须仔细检查源代码，但 cdkFocusInitial 属性实际上并不管理任何逻辑。使用cdkTrapFocus时，它只是作为一个地方标记。
为了让 cdkFocusInitial 在包含它的 Material 组件（MatDialog、MatBottomSheet、MatSidenav）之外工作，它必须包含在一个同时具有 cdkTrapFocus 的元素中（如根据@WillHowell）和cdkTrapFocusAutoCapture="true"

【解决方案2】：

您可以使用#myInput 设置本地模板引用，并在您的ts 文件中使用@ViewChild() myInput 访问元素，并在挂钩ngAfterViewInit 中获取本机元素并使用设置焦点属性 this.myInput.nativeElement.focus()

另一种选择是构建一个焦点指令并将其绑定到元素like this的焦点属性

【讨论】：

【解决方案3】：

您可以在要聚焦的元素上设置ngbAutofocus。

见https://ng-bootstrap.github.io/#/components/modal/examples#focus

【讨论】：

【解决方案4】：

我正在使用 Angular Material 版本 13.1.3。对于底部工作表组件，cdkFocusInitial 对我不起作用，除非我也设置了 autoFocus 配置选项；

this.bottomSheet.open(BottomSheetComponent, {
  autoFocus: true
})

【讨论】：