在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元素。相关内容