Angular 嵌套组件的角度-自动聚焦指令

我在我们的产品中实现了，对于普通输入字段，它工作得非常好。遗憾的是，我们的输入架构只使用了一部分，大部分使用的是定制组件

<app-edit-value [control]="control"></app-edit-value>

它接受一个FormControl对象并创建一个稍微好一点的输入对象。当然，这个指令在这里不起作用，所以我添加了可选的[autofocus]输入

隐藏在我们背后的是一个可以处理许多不同类型的用户输入的结构，比如复选框、列表、文本、数字等等

<mat-form-field *ngIf="control.type = ...">
   <input appAutoFocus="autofocus" ...>
</mat-form-field>
...

...

我的想法是将AppAutofocus指令传递给像这样的实际可聚焦元素，但它没有按预期工作。即使我从来没有设置过[autofucos]元素，但在加载页面后，这些元素最终会成为焦点，我也不知道为什么

---

我是否遗漏了一些明显的东西，或者是否有更优雅的方法来做到这一点？

它似乎可以通过稍微调整指令来工作。以下是指令代码：

export class AutofocusDirective {
  @Input('autofocus') public isEnabledAutoFocus: boolean;

  public constructor(private el: ElementRef) {}

  public ngAfterContentInit() {
    if (this.isEnabledAutoFocus) {
      this.el.nativeElement.focus();
    }
  }
}

然后，我将FormControl从父级传递给子级，并将其连接到输入（在该输入上应用了该指令）

要测试我的代码
这对我很有用：

自动对焦指令：

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appAutofocus]'
})
export class AutofocusDirective {

  @Input() appAutofocus = true;

  constructor(private el: ElementRef) { }

  public ngAfterContentInit() {
    setTimeout(() => {
      if (this.appAutofocus) {
        this.el.nativeElement.focus();
      }
    }, 0);
  }

}

然后在自定义组件的模型上，我添加了一个输入以启用自动聚焦

@Input() autofocus=false;


自定义组件的视图：

<div>
    ...
 
    <input [appAutofocus]="autofocus" ...>
</div>
  


...

用这种方式：

 <my-component [autofocus]="true">
  </my-component>


这不应该像这样放在括号中：
@PierreDuc如果值“autofocus”是一个字符串，那么您可以在没有括号的情况下使用它。但是如果autofocus是一个作用域变量，那么应该使用[]括号。@FyZ1K当然，在一个专门为autofocus设计的指令上使用字符串感觉很奇怪，问题中链接的autofocus指令需要boolean@PierreDuc非常正确。。我还希望这样一个属性有一个布尔值，但现在看来它需要一个基本/基本数据类型的值。
<div>
    ...
 
    <input [appAutofocus]="autofocus" ...>
</div>
  

 <my-component [autofocus]="true">
  </my-component>