在Angular 7/Typescript中,要按类名解析内部HTML,可以使用ElementRef
和Renderer2
来实现。
首先,需要在组件中引入ElementRef
和Renderer2
:
import { Component, ElementRef, Renderer2 } from '@angular/core';
然后,在组件的构造函数中注入ElementRef
和Renderer2
:
constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
接下来,可以使用Renderer2
的setProperty
方法来设置元素的innerHTML
属性,并将HTML赋值给字符串变量:
// 假设要解析的HTML存储在字符串变量html中
const html = '<div class="my-class">Hello World</div>';
// 创建一个新的div元素
const div = this.renderer.createElement('div');
// 设置div元素的innerHTML属性为html
this.renderer.setProperty(div, 'innerHTML', html);
// 获取所有具有my-class类名的元素
const elements = div.getElementsByClassName('my-class');
// 遍历元素并输出其内容
for (let i = 0; i < elements.length; i++) {
console.log(elements[i].innerHTML);
}
以上代码中,首先使用Renderer2
的createElement
方法创建一个新的div元素,然后使用setProperty
方法将HTML赋值给div元素的innerHTML
属性。接着,使用getElementsByClassName
方法获取所有具有my-class
类名的元素,并通过遍历输出它们的内容。
需要注意的是,Renderer2
是Angular的官方推荐方式来操作DOM,它提供了一系列方法来操作元素属性、样式等。使用Renderer2
可以确保应用在不同平台上的一致性。
关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,建议在腾讯云官方网站上查找相关产品和文档。
领取专属 10元无门槛券
手把手带您无忧上云