在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);
}
}
然后,在模板中应用该指令:
这是一段文本
当应用指令后,控制台会打印出这是一段文本。