Angular中优雅的实现输入框自动聚焦

在日常的Angular开发中，经常会遇到需要在页面加载或特定事件后自动聚焦到某个输入框的需求。今天我们将探讨如何在Angular中实现这一点，避免使用计时器（timer）等不太优雅的方式，提供两种基于Angular生命周期和指令的方法。

背景

假设我们有一个组件，点击它时会显示一个之前通过*ngIf隐藏的输入框。在这个场景下，我们希望输入框一出现就立即获得焦点。

常见但不优雅的解决方案

在之前的实现中，可能使用了@ViewChild和@HostListener结合计时器的方式：

@ViewChild("input") input: ElementRef;