在Angular 8中,可以使用@ViewChild
装饰器来识别和订阅传递给组件模板中的元素。
首先,在组件的代码文件中,导入ViewChild
装饰器和ElementRef
类:
import { Component, ViewChild, ElementRef } from '@angular/core';
然后,在组件类中定义一个@ViewChild
装饰器来获取对模板元素的引用。可以使用ElementRef
类来获取对元素的原生DOM引用。
@Component({
selector: 'app-my-component',
template: `
Sample Element
`
})
export class MyComponent {
@ViewChild('myElement', {static: true}) myElement: ElementRef;
ngAfterViewInit() {
console.log(this.myElement.nativeElement);
}
}
在上面的示例中, 然后,在 请注意, 最后,可以在模板中使用组件: 当组件加载时,将会在控制台输出 这就是在Angular 8中识别和订阅传递给组件模板中的元素的解决方法。@ViewChild
装饰器使用myElement
作为标识符来获取对模板中的{static: true}
选项表示在组件的ngOnInit
之后立即执行装饰器。
ngAfterViewInit
生命周期钩子函数中,可以访问模板元素的原生DOM引用,例如this.myElement.nativeElement
。在这个函数中,可以执行任何与元素相关的操作。ViewChild
装饰器返回的是一个QueryList
对象,但由于我们设置了{static: true}
选项,所以我们可以直接访问原生DOM元素。相关内容