Question

我在我们的产品中实现了this，对于普通的输入字段，它工作得很好。遗憾的是，只有部分输入架构使用，大多数情况下我们使用的是定制组件

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

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

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

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

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

我是否缺少明显的东西，或者也许有更优雅的方式做到这一点？

Answer 1

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

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

  public constructor(private el: ElementRef) {}

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

然后，我将FormControl从父级传递给Child，然后将其连接到输入（在其中应用了指令的地方）。

<form [formGroup]="form">
    <input formControlName="input1" name="one" type="text" placeholder="Input 1" />
    <input formControlName="input2" name="two" type="text" placeholder="Input 2" />
    <app-input-parent [control]="form.get('input3')" isAutoFocus="true"></app-input-parent>
</form>

还有孩子：

<input [autofocus]="isAutoFocus" [formControl]="control" placeholder="Input child" type="text">

Here is the link用于测试我的代码

Answer 2

这对我有用：

自动对焦指令：

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>

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

2 个答案: