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

在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学习(01)-架构概览

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

3.7K50

angular采用注释进行文档编写

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

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

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

    5.2K10

    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.5K30

    【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.5K51

    假如用王者荣耀的方式学习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:加速压缩

    63000

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

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

    85120

    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

    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

    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中之前应如何对其进行排序。

    5.1K20

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

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

    15.3K30

    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

    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.3K41

    prettier使用指南(包含所有配置项)

    ) JSX Angular Vue Flow TypeScript CSS, Less, and SCSS HTML JSON GraphQL Markdown, including GFM and...,consistent是有一个需要引号就统一加,preserve是保留用户输入的引号 quoteProps: 'as-needed', // 7.在jsx文件中的引号需要单独设置(jsxSingleQuote...,c#都是这样)带来的强迫症,c语言用单引号表示单个字符,双引号表示字符串,c语言区分这两个我猜是因为要斤斤计较内存的使用的缘故,编译的时候给单个字符内存分配和给字符串内存分配的占用是不同的。...但是在js,python这些语言里面,单引号双引号都可以用字符串,就没必要一定遵循这个强迫症了。 shell和powershell这两种语言里面用单引号表示纯字符串,双引号则是可以添加变量的字符串。...用单引号可以少按一个shift,方便一些 html中用的是双引号,所以js区分一下,用单引号。 其他默认的配置符合我使用习惯的也有可以讨论的: 关于tab用几个空格的讨论我选择用两个空格。

    10.2K40

    angularjs 指令详解

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

    2.2K40

    你了解 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.6K10
    领券