angular - Angular 指令查询同级 HTML

Question

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

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

在myDirective我可以很容易地得到forvia a的值@HostBinding。然后，在我的指令中，我想获取formControlName具有给定 ID 的元素。例如，我不知道该怎么做，因为我的指令似乎可能在创建输入元素之前运行。

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

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

score 0 · Accepted Answer

@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. 但是您必须小心，因为这将采用本机元素输入值。

1 回答 1