角度：如何让 NgControl 对值做出反应仅主机的变化<input>

Question

我在<input>元素上使用指令并获取对其控件的引用，如下所示：

@ContentChild(NgControl) private readonly _inputNgControl: NgControl;

但是当我听到这样的模型变化时：

ngAfterContentInit(): void {
this._inputNgControl.control.valueChanges
.distinctUntilChanged()
.subscribe(value => {
// ...
});
}

似乎this._inputNgControl.control不是指指令所在的输入，而是指向我的父组件中的所有输入(其中包含具有同一指令的多个<input>元素(，因为我从父组件中的所有输入中获取更改，而不仅仅是我键入内容的地方。

那么如何过滤仅活动输入的值更改呢？我是否需要使用构造函数来注入它，这会使 NgControl 本地而不是全局吗？还是我需要使用 forwardRef 实现VALUE_ACCESSOR自己(据我所知，这就是 NgControl 正在做的事情(？

最不干净的解决方案是将 id 传递给指令并使

.filter(() => this._directiveId === this._inputNgControl.name)

所以如果可能的话，我想避免这种情况。

Answer 1

有帮助的是使用HostListener。到目前为止，我一直在使用 HostListener 来处理本机浏览器事件，例如收听键盘操作或鼠标滚动，但我不知道您可以使用它们来访问 host 元素的输出(因此名称为主机侦听器，duh！(：

@HostListener('ngModelChange', ['$event'])
onModelChange(value: string | number) { this.modelChange$.next(value); }

然后在带有 ContentChild 的组件中：

@Component({
selector: input-wrapper',
template: `<ng-content></ng-content>`
})
export class InputWrapperComponent implements AfterContentInit {
@ContentChild(InputControllerDirective) private _icd: InputControllerDirective;
ngAfterContentInit() {
this._icd.modelChange$.subscribe((value: string | number) => {
// do sth.
})
}
}