Angular 指令查询兄弟 HTML

Question

Using Angular 10 我想查询一个兄弟元素。基本上我有这样的东西：

<label myDirective for="foo" ...
<input id="foo" formControlName="xyz" ...

在 myDirective 中，我可以通过 @HostBinding 轻松获得 for 的值。然后在我的指令中，我想获取具有给定 ID 的元素的 formControlName。我不确定该怎么做，因为看起来我的指令可能运行在创建输入元素之前，例如。

我正在尝试自动化一点，所以我不必写这个：

<label [myDirective]="foo.attributes.getNamedItem('formControlName').value" ...
<html #foo ...

Answer 1

您可以在指令代码中创建一个 @Input()。您的指令：

  @Input() for;

  ngOnChanges() {
    if (!!this.for) {
      console.log(this.for.attributes.formcontrolname.nodeValue); // name
    }
  }

您的 HTML 代码：

<form [formGroup]="form">
  <div appDirective [for]="any"> 
  <input #any formControlName="name">
  </div>
</form>

这样你就有了你要求的 formControlName 属性。为了获得它的价值，我没有看到不输入表格的方法。或者您可以访问 this.for.value。但是你必须小心，因为这将采用原生元素输入值。

Angular directive query sibling HTML