在 Angular 中，我们如何检测 DOM 元素是否关联了 ngModel？

Question

我有一个修改宿主元素选中状态的属性指令。我正在使用以下代码来执行此操作：

constructor(private el: ElementRef, private model: NgModel) {}

//OnInit code

if ('ng-reflect-model' in this.el.nativeElement.attributes) { <-- Problem is here, this attribute is available for debug, i want to put some condition here
  this.model.viewToModelUpdate(modelValue);
  this.model.valueAccessor.writeValue(modelValue);
} else {
  this.el.nativeElement.checked = modelValue;
}

我的问题是当输入关联了 ngModel 时，我想更新模型（如果它可用）否则更新本机元素的选中状态。

Answer 1

我目前使用的一个解决方案是依赖 NgModel class 的 this.model.valueAccessor 属性。如果此属性不存在，那么我们无法访问模型值，因此没有必要使用它进行更新。

所以我更新的代码是：

if (this.model.valueAccessor !== undefined && this.model.valueAccessor !== null) {
  this.model.viewToModelUpdate(modelValue);
  this.model.valueAccessor.writeValue(modelValue);
} else {
  this.el.nativeElement.checked = modelValue;
}

这是基于https://angular.io/api/forms/NgControl#valueAccessor

在 Angular 中，我们如何检测 DOM 元素是否关联了 ngModel？

In Angular, How can we detect if DOM element has ngModel associated with it?

angular-directive

angular