要在Angular 7中找到组件中元素的属性值,可以使用ViewChild
装饰器和ElementRef
类。
以下是一个示例:
在组件的HTML模板中,给元素添加一个标识符(例如#myElement
)来引用该元素:
这是一个示例元素
在组件的Typescript文件中,使用ViewChild
和ElementRef
来获取元素的引用,并通过nativeElement
属性访问元素的属性值:
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
@ViewChild('myElement', { static: false }) myElement: ElementRef;
ngAfterViewInit() {
// 访问元素的属性值
console.log(this.myElement.nativeElement.getAttribute('属性名'));
}
}
在上面的代码中,@ViewChild('myElement', { static: false })
装饰器将myElement
标识符与myElement
属性关联起来。{ static: false }
选项用于确保ViewChild
装饰器在组件的视图初始化之后才会执行。
在ngAfterViewInit
生命周期钩子中,可以使用this.myElement.nativeElement
来获取元素的引用,并使用getAttribute
方法获取元素的属性值。将'属性名'
替换为要获取的属性的实际名称。
要在组件中使用这个示例,请确保将组件的选择器添加到父组件的HTML模板中:
这样,当父组件被加载时,ngAfterViewInit
生命周期钩子将会执行,并输出元素的属性值到控制台。