在Angular中,你可以使用ViewChild
装饰器来选择元素,并在其onChange
事件上创建订阅。以下是一个示例解决方法:
在你的组件类中,首先导入ViewChild
和ElementRef
:
import { Component, ViewChild, ElementRef } from '@angular/core';
然后在组件类中声明一个ViewChild
对象来引用你要选择的元素,并使用ElementRef
注入它:
@Component({
selector: 'app-your-component',
template: `
`
})
export class YourComponent {
@ViewChild('myInput', { static: true }) myInput: ElementRef;
onChange() {
// 在这里编写你的订阅逻辑
console.log(this.myInput.nativeElement.value);
}
}
在模板中,我们使用#myInput
来声明一个引用名为myInput
的输入框元素。然后在change
事件上调用onChange()
方法。
在@ViewChild
装饰器中,我们传入引用的名字myInput
和一个选项对象。static: true
选项表示在静态查询中查找元素,这样我们就可以在ngOnInit
钩子函数中访问到元素。
在onChange()
方法中,我们可以使用this.myInput.nativeElement
来获取选择的元素,并对其进行操作。在这个示例中,我们简单地打印输入框的值。
请注意,由于ViewChild
是在ngAfterViewInit
生命周期钩子之前解析的,因此我们必须使用static: true
选项来确保在onChange()
方法中能够访问到元素。