自动对焦输入模式在 Ng-Datepicker 中不起作用答案

【问题标题】：Autofocus input modal doesn't work inside Ng-Datepicker自动对焦输入模式在 Ng-Datepicker 中不起作用
【发布时间】：2018-09-13 14:12:50
【问题描述】：

考虑以下StackBlitz，我正在使用 Ng-Bootstrap 开发 Angular 应用程序 6，但遇到以下问题：

我有两个组件：modal component 和 calendar component。模态组件有一个输入，当模态启动时，输入是自动聚焦的。当我从一个按钮调用我的模态组件时，输入会完美地自动对焦。当从日历组件调用模态组件时出现问题，即模态组件在日历组件内部。选择日历日期时，模式会打开，但条目不会自动聚焦。我的问题是为什么当从日历组件调用模态组件时，输入不会自动聚焦，但如果它有效，我会从按钮调用我的模态组件。这种行为的解释是什么？

非常感谢！

【问题讨论】：

标签： javascript angular typescript ng-bootstrap

【解决方案1】：

尝试使用生命周期钩子AfterViewChecked：

DEMO

ngAfterViewChecked() {
    this.elementRef.nativeElement.focus();
  }

【讨论】：

非常感谢，但为什么在控制台中显示此错误：错误：ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked。以前的值：'focused: true'。当前值：'focused: false'。
这是由于 Ng-Datepicker。当您专注于输入时，它比 blur 更专注。您需要手动设置它 blur()。