Angular中<input>标签autofocus属性绑定@Input值无法正常生效的问题求助

各位好，我最近在Angular项目里碰到了一个棘手的小问题，折腾了好久都没解决，想请教下大家有没有类似的经验或者解决方案。

情况是这样的：我封装了一个InputComponent组件，里面定义了@Input() autoFocus属性，目的是通过这个输入属性来控制组件内部<input>标签的自动聚焦效果——也就是页面加载或者刷新时，这个输入框能自动获得焦点。

首先我先确认了原生HTML里的可行写法，这些写法都能正常触发输入框的自动聚焦：

• <input autofocus />
• <input autofocus="" />
• <input autofocus="true" />
• <input autofocus="'true'" />
• <input autofocus="autofocus" />
• <input autofocus="'autofocus'" />

但轮到在Angular里通过@Input绑定值的时候，不管我怎么试都不行。我把autoFocus分别设为true、'true'或者'autofocus'，尝试了这些绑定语法：

• <input [autofocus]="autoFocus" />
• <input [attr.autofocus]="autoFocus" />
• <input autofocus="{{ autoFocus }}" />

甚至我直接把值写死在模板里测试，结果还是一样，输入框就是不自动聚焦：

• <input [autofocus]="'autofocus'" />
• <input [autofocus]="'true'" />
• <input [autofocus]="true" />
• <input [attr.autofocus]="'autofocus'" />
• <input [attr.autofocus]="'true'" />
• <input [attr.autofocus]="true" />
• <input autofocus="{{ 'autofocus' }}" />
• <input autofocus="{{ 'true' }}" />
• <input autofocus="{{ true }}" />

更奇怪的是，我用Chrome的调试工具去看最终渲染的DOM结构，发现生成的代码都是<input autofocus="true" />，看起来和原生能生效的写法完全一致，但页面加载/刷新的时候，输入框就是不会自动获得焦点。

我猜会不会是Angular的模板解析和DOM渲染时机太晚了？浏览器可能在Angular处理完属性绑定之前，就已经完成了对autofocus属性的检测，所以后续绑定的属性就没起作用？

目前我能想到的后备方案是自己写一个自定义指令来实现自动聚焦，但还是希望能找到更直接的解决方案。不知道有没有同学碰到过同样的问题，或者有什么好的建议？

内容来源于stack exchange