在Angular中,可以使用ElementRef
和Renderer2
来获取元素内的文本。
首先,导入ElementRef
和Renderer2
:
import { Component, ElementRef, Renderer2 } from '@angular/core';
然后,在属性指令的构造函数中注入ElementRef
和Renderer2
:
constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
接下来,在指令的ngOnInit
生命周期钩子中,使用ElementRef
和Renderer2
来获取元素内的文本:
ngOnInit() {
const element = this.elementRef.nativeElement;
const text = element.innerText;
console.log(text);
}
这样,当指令被应用到元素上时,ngOnInit
生命周期钩子会被调用,然后通过ElementRef
和Renderer2
获取元素内的文本。
完整的代码示例:
import { Directive, ElementRef, Renderer2 } from '@angular/core';
@Directive({
selector: '[appGetInnerText]'
})
export class GetInnerTextDirective {
constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
ngOnInit() {
const element = this.elementRef.nativeElement;
const text = element.innerText;
console.log(text);
}
}
然后,在模板中应用该指令:
这是一段文本
当应用指令后,控制台会打印出这是一段文本
。