首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Angular 7/Typescript中将HTML赋值给字符串变量的情况下,如何按类名解析内部html

在Angular 7/Typescript中,要按类名解析内部HTML,可以使用ElementRefRenderer2来实现。

首先,需要在组件中引入ElementRefRenderer2

代码语言:txt
复制
import { Component, ElementRef, Renderer2 } from '@angular/core';

然后,在组件的构造函数中注入ElementRefRenderer2

代码语言:txt
复制
constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

接下来,可以使用Renderer2setProperty方法来设置元素的innerHTML属性,并将HTML赋值给字符串变量:

代码语言:txt
复制
// 假设要解析的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);
}

以上代码中,首先使用Renderer2createElement方法创建一个新的div元素,然后使用setProperty方法将HTML赋值给div元素的innerHTML属性。接着,使用getElementsByClassName方法获取所有具有my-class类名的元素,并通过遍历输出它们的内容。

需要注意的是,Renderer2是Angular的官方推荐方式来操作DOM,它提供了一系列方法来操作元素属性、样式等。使用Renderer2可以确保应用在不同平台上的一致性。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,建议在腾讯云官方网站上查找相关产品和文档。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular快速学习笔记(3) -- 组件与模板

插值表达式{{...}}可以把计算后字符串插入到 HTML 元素标签内文本或对标签属性进行赋值。...Angular 执行这个表达式,并把它赋值绑定目标的属性,这个绑定目标可能是 HTML 元素、组件或指令。 典型表达式上下文就是这个组件实例,它是各种绑定值来源。...模板语句解析器和模板表达式解析器有所不同,特别之处在于它支持基本赋值 (=) 和表达式链 (; 和 ,)。...正常 HTML 开发过程中,你使用 HTML 元素来创建视觉结构, 通过把字符串常量设置到元素 attribute 来修改那些元素。...在这种模式下,有类型变量默认是不允许 null 或 undefined 值,如果有未赋值变量,或者试图把 null 或 undefined 赋值不允许为空变量,类型检查器就会抛出一个错误 Angular

15.2K30

Angular学习(01)-架构概览

意思就是说,不同模块在运行期间互不影响,就好像各自运行在各自沙箱容器中一样。举个简单例子,不同模块中声明相同变量,或相同 css 选择器,它们之间并不会起冲突。...而对于浏览器解析并呈现前端页面时,Html、CSS、JavaScript 这三分文件通常都是需要,而 Angular 是使用了 TypeScript,所以一个组件,其实就包括了:Html,CSS,TypeScript...TypeScript 文件中某个变量直接进行绑定,后续这个变量值变化时,Angular 会自动去更新相应 DOM 属性,也就是说,原本那些操纵 DOM 代码,Angular 帮我们做了,我们不用再自己去处理了...因为组件模板,其实就是一份 HTML 文件,基于 HTML 标签之上,加上一些 Angular 模板语法,而 Angular 将这份 HTML 文件代码交给浏览器解析之前,会先自行解析一遍,去将模板中不属于...这个时候,就可以将这些工作都封装到指令内部,然后每个按钮标签上加上该指令,Angular 解析模板时,发现了这个指令,就会为每个按钮都加上这么一段程序逻辑。

3.5K50

angular采用注释进行文档编写

: '{$', variableEnd: '$}' }; }) 以上是Dgeni配置信息,而接下来重点是如何对文档进行解析。.../processors/link-inherited-docs')) 过滤处理器 Dgeni 调用Typescript解析 ts 文件后所得到文档对象,包含着所有类型(不管私有、还是NgOninit...tags.find(d => d.tagName == 'docs-private') : false; } 分类处理器 虽然 AngularTypescript 文件,但相对于 ts 而言本身对装饰器依赖非常重...,而默认 typescript 对这类归纳其实是很难满足我们模板引擎所需要数据结构,比如一个 @Input() 变量,默认情况下 ts 解析器统一用一个 tags 变量来表示,这对模板引擎来说太难于驾驭...else if (isNgModule(classDoc)) { classDoc.isNgModule = true; } } } 分组处理器 ts 解析程序中表现是一个数组类似

1.8K20

AngularDart4.0 指南- 模板语法一 顶

学习如何编写显示数据并在数据绑定帮助下使用用户事件模板。 Angular应用程序管理用户看到和可以做事情,通过组件实例(组件)和面向用户模板交互来实现这一点。...最后,它将这个复合插值结果赋值一个元素或指令属性 您似乎元素标记之间插入结果并将其分配给属性。这么想很方便,你会因为这个错误而受苦。虽然这不完全正确。...它是一个事件全部。 就是如何从用户操作更新应用程序状态。 响应事件是Angular“单向数据流”另一面。事件循环这个周期中,您可以自由地在任何地方进行所有更改。...模板语句解析器与模板表达式解析器不同,特别支持基本赋值(=)和链接表达式(with;) 但是,某些Dart语法是不允许: new 和 const 递增和递减运算符,++和 -- 赋值运算符,例如 +... 许多情况下插值是属性绑定较为方便替代品。 将数据值呈现为字符串时,没有技术上理由去选择另一种形式,但插值更可读。

5.1K10

Angular10配置webpack打包 「详细教程」

--project getting-started 备注:这一步通过NPM安装包,Angular >= 7 and CLI >= 7版本中,让您项目使用自定义生成器更新您angular.jsonng... app.component.ts中使用全局变量VERSION:  import { Component } from '@angular/core';      declare const VERSION...这里说分离,当然只是针对一些第三方库(一般来自 node_modules),以及我们自己定义工具库(或公用方法)。 不知如何下手?首先,我们来看官网一份 1....这对于文件中包含每次会随着编译而发生变化哈希 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件,这个插件有两个重要作用。...仅允许您添加一些块(例如,仅单元测试块) chunksSortMode {String、Function} auto 允许控制将块包含到HTML中之前应如何对其进行排序。

4.8K20

Angular 从入坑到挖坑 - 组件食用指南

组件中,通过使用 @Component 装饰器 1 用来将声明为组件,并为这个组件配置一些元数据 2,以决定该组件在运行期间该如何处理、实例化和使用 装饰器中存在三个基础配置参数,用来完成组件与视图之间关联...,可以通过 angular 内置模板语法与 html 元素进行结合,从而告诉 angular 如何根据我们应用逻辑和数据来渲染页面 4.1.2.1、插值表达式 插值表达式可以将组件中属性值或者是模板上数据通过模板表达式运算符进行计算...模板表达式变量来源 模板本身变量 指令上下文变量 组件成员信息(属性 or 方法) 使用模板表达式时,如果变量多个来源中都存在的话,则模板变量是最优先,其次是指令上下文变量,最后是组件成员...text-red、bg-blue 都是 css ,如果想要在指定元素上添加该类,则 css 对应值为 true,反之则为 false NgStyle:用来设置元素多个内联样式,如果只设置一个内联样式...非空断言运算符 tsconfig.json 中启用 strictNullChecks 属性,typescript 将会强制开启严格空值检查,在这种模式下,所有定义了类型属性是不允许赋值为 null

15.8K30

WEB 前端插件整理

默认情况下,它会查找 TODO 和 FIXME 关键字。当然,你也可以添加自定义表达式。...#5 Project Manager 多项目切换工具 H5、Css插件 #1 IntelliSense for CSS class names in HTML HTML中智能提示可用 #2...你只需空文件中输入 html,并按 Tab 键,即可生成干净文档结构。 #10 CSS Peek 使用此插件,你可以追踪至样式表中 CSS 和 ids 定义地方。...AngularJs、Ts、JQ插件 #1 angular2-switcher 通过三个简单键绑定,组件,模板和样式之间快速切换。当光标位于变量上时,只需按下F12键即可支持转到模板变量定义。...比内置要全更智能 #14 Angular Files vsc中集成angular-cli工具,可界面华新建component、directove、module、routing、pipe等feature

1.4K30

angularjs 指令详解

默认情况下,调用指令时会在后台通过Ajax来请求HTML模板文件。加载大量模板将严重拖慢一个客户端应用速度。为了避免延迟,可以部署应用之前对HTML模板进行缓存。...说一下,不管是@、=还是&绑定策略,它们都有一个默认方式,以@绑定策略为例,如上面代码那么样:myUrl:'@',直接用一个@表示绑定方式,它就会默认得将指令属性my-url赋值myUrl变量...当然,你不想使用默认方式,也就是说,你不想myUrl变量绑定my-url值,而想要绑定其它属性值,那么你可以@后加上你希望属性(格式要求:驼峰式)。...那么我们知道了指令myUrl变量值是如何,那么我们要如何在template中使用它呢?...本地作用域属性:使用@符号将本地作用域同DOM属性值进行绑定,使指令内部作用域可以使用外部作用域变量:  @ 可以指令中使用绑定字符串了。   2.

2.2K40

【17】进大厂必须掌握面试题-50个Angular面试

7. Angular中,什么是字符串插值? Angular字符串插值是一种特殊语法,它在双花括号 {{}}中使用模板表达式来显示组件数据。它也称为小胡子语法。...顾名思义,它们控制数据如何从服务器流到HTML UI。 10. Angular范围是什么? Angular范围是一个引用应用程序模型对象。它是表达式执行上下文。...Angular表达式 JavaScript表达式 1.它们可以包含文字,运算符和变量。 1.它们可以包含文字,运算符和变量。 2.它们可以写在HTML标记内。 2.它们不能写在HTML标记内。...orderBy: 表达式对数组排序。 大写: 将字符串格式化为大写。 28.什么是Angular依赖注入?...通常,Angular中,此转换是从TypeScript到JavaScript。这是一个隐式过程,在内部发生。 34. How to perform animation in Angular?

41.2K51

TypeScript超详细入门教程(上)

num类型为number数值类型,所以当num再赋值字符串”abc”时,就会报错。...,可以配置tslint,将 "no-unnecessary-initializer"设为 false即可 let n: null = null; 默认情况下 undefined 和 null 可以赋值任意类型值...——孟德斯鸠 上个小节我们学习了八个JavaScript中常见数据类型,你也学会了如何一个变量指定类型。...现在你只需知道 void 表达含义即可,后面我们会用专门一节来学习函数。 void 类型变量只能赋值为 undefined 和 null,其他类型不能赋值 void 类型变量。...,先是定义一个变量 Status,然后定义一个立即执行函数,函数内 Status 添加对应属性,首先Status[“Off”] = 0是Status对象设置Off属性,并且值设为 0,这个赋值表达式返回值是等号右边

4.1K41

你了解 Typescript

什么是Typescript TypeScript是JavaScript超集,带来了诸多新特性: 可选静态类型 类型接口 ES6和ES7被主流浏览器支持之前使用它们新特性 编译为可被所有浏览器支持...支持使用ES6和ES7新特性 TypeScript中,你可以直接使用ES6最新特性,在编译时它会自动编译到ES3或ES5。...并且还支持目前流行编辑器,比如VSCode, Atom和Sublime Text。 此外,TypeScript还支持解析JSDoc。 为什么使用Typescript 1....null和undefined是所有类型子类型 // 可以把null和undefined赋值各种类型变量 let u: undefined = undefined; let n: null = null...声明文件 大多数情况下,类型声明包名字总是与它们npm上名字相同,但是有@types/前缀: npm install -D @types/node 这里我们参考node.d.ts中require

5.5K10

angularjs学习第一天笔记

您好,我是一后端开发工程师,由于工作需要,现在系统从0开始学习前端js框架之angular,每天把学习一些心得分享出来,如果有什么说不对地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家点评与赐教...2、angularjs创建一个页面的简单特性     a.首先要引用angularjs库     b.html页面要标注ng-app属性,该标注表示所在范围内DOM结构才收angularjs所控制...$scope也有父子级之分,和面向对象继承一样,子级$scope继承父级$scope,其中跟$scope表示为:$rootScope  h.提供观察者以监视数据模型变化       i.可以将数据模型变化通知整个应用..., function($scope) {         控制器内业务逻辑代码...      });    7、表达式     angular表达式主要学习两个表达式:解析达式,关键词( $parse...,关键词( $interpolate)        简单理解就是格式化字符串,通过{{站位字符串名称}}对字符串解析站位,然后通过关键词$interpolate返回函数对站位字符串名称赋值,得到最终字符串

2.2K10

假如用王者荣耀方式学习webpack

query——使用文件?...(不同于loader用来解析非js文件类型,plugin可以用来处理更复杂任务,包括打包、优化、压缩,最小到重定义环境变量。它是非常强大,除了插件市场提供成熟插件,还可以自己进行编写。...ExtractTextPlugin:将打包中css单独抽离出来 EnvironmentPlugin(webpack自带):webpack层面定义项目中可以使用全局变量 DefinePlugin(...webpack自带):webpack层面定义项目中可以使用全局变量 与EnvironmentPlugin形式不同而已 CleanWebpackPlugin:清理指定目录文件 CopyWebpackPlugin...:将指定目录文件赋值到指定目录下 HtmlWebpackPlugin:webpack打包后自动生成html页面 ParallelUglifyPlugin:加速压缩 本期英雄介绍完毕,祝大家早日国服王者

82820

假如用王者荣耀方式学习webpack

占位符: name——使用入口名称 id——使用内部chunk id hash——使用每次构建过程中唯一hash chunkhash——使用基于每个chunk内容hash query——使用文件?...(不同于loader用来解析非js文件类型,plugin可以用来处理更复杂任务,包括打包、优化、压缩,最小到重定义环境变量。它是非常强大,除了插件市场提供成熟插件,还可以自己进行编写。...HappyPack:运用多核加速打包 ExtractTextPlugin:将打包中css单独抽离出来 EnvironmentPlugin(webpack自带):webpack层面定义项目中可以使用全局变量...DefinePlugin(webpack自带):webpack层面定义项目中可以使用全局变量 与EnvironmentPlugin形式不同而已 CleanWebpackPlugin:清理指定目录文件...CopyWebpackPlugin:将指定目录文件赋值到指定目录下 HtmlWebpackPlugin:webpack打包后自动生成html页面 ParallelUglifyPlugin:加速压缩

61200

angularjs学习第一天笔记

您好,我是一后端开发工程师,由于工作需要,现在系统从0开始学习前端js框架之angular,每天把学习一些心得分享出来,如果有什么说不对地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家点评与赐教...2、angularjs创建一个页面的简单特性     a.首先要引用angularjs库     b.html页面要标注ng-app属性,该标注表示所在范围内DOM结构才收angularjs所控制...$scope也有父子级之分,和面向对象继承一样,子级$scope继承父级$scope,其中跟$scope表示为:$rootScope  h.提供观察者以监视数据模型变化       i.可以将数据模型变化通知整个应用...', function($scope) {         控制器内业务逻辑代码...      });    7、表达式     angular表达式主要学习两个表达式:解析达式,关键词( $parse...,关键词( $interpolate)        简单理解就是格式化字符串,通过{{站位字符串名称}}对字符串解析站位,然后通过关键词$interpolate返回函数对站位字符串名称赋值,得到最终字符串

2.1K30

Angular 2 架构(上)

(Data Binding) 6、指令 (Directives) 7、服务 (Services) 8、依赖注入 (Dependency Injection) 下图展示了每个部分是如何相互工作: 图中模板...(Templates)是由 Angular 扩展 HTML 语法组成,组件 (Components)用来管理这些模板,应用逻辑部分通过服务 (Services)来完成,然后模块中打包服务与组件,...以下是一个简单是实例: 网站地址 : {{site}} Angular中,默认使用是双大括号作为插值语法,大括号中间值通常是一个组件属性变量。...你可以把元数据附加到这个上来告诉 Angular Component 是一个组件。 TypeScript 中,我们用 装饰器 (decorator) 来附加元数据。...@Component 中配置项说明: selector - 一个 css 选择器,它告诉 Angular 父级 HTML 中寻找一个 标签,然后创建该组件,并插入此标签中。

1.4K10
领券