您如何从Angular 2属性指令内访问元素HTML?
发布时间:2020-12-17 09:57:47 所属栏目:安全 来源:网络整理
导读:Angular 2文档提供了一个创建一个改变元素背景颜色的属性指令的例子: https://angular.io/docs/ts/latest/guide/attribute-directives.html p myHighlightHighlight me!/p import { Directive,ElementRef } from '@angular/core';@Directive({ selector: '[
Angular 2文档提供了一个创建一个改变元素背景颜色的属性指令的例子:
https://angular.io/docs/ts/latest/guide/attribute-directives.html <p myHighlight>Highlight me!</p> import { Directive,ElementRef } from '@angular/core'; @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } } 我也可以使用el.nativeElement来获取元素的内容(例如突出显示我!),修改它并更新元素?
所以实际上,我应该做一个console.log(el.nativeElement)的评论应该指向正确的方向,但是我并不期望输出只是一个表示DOM元素的字符串.
你可以用它来帮助你解决问题的方式来检查它,就是在你的例子中做一个console.log(el),然后你可以访问nativeElement对象,并且会看到一个名为innerHTML的属性. 这将导致您的原始问题的答案: let myCurrentContent:string = el.nativeElement.innerHTML; // get the content of your element el.nativeElement.innerHTML = 'my new content'; // set content of your element 更新更好的方法: 由于这是公认的答案,网络工作人员日益重要(我们也被认为是最佳实践),所以我想添加Mark Rajcok的建议. 以编程方式操纵DOM元素的最佳方法是使用Renderer: constructor(private _elemRef: ElementRef,private _renderer: Renderer) { this._renderer.setElementProperty(this._elemRef.nativeElement,'innerHTML','my new content'); } 更新: This question with its answer解释了console.log的行为. 这意味着console.dir(el.nativeElement)将作为这种情况的控制台中的“可检查”对象访问DOM元素的更直接的方法. 希望这有帮助. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- angularjs – ng-grid访问已排序的数组数据
- angularjs – Webpack,angular和ng-annotate-loader – 带有
- 【数据结构】稀疏结构及稀疏矩阵的压缩存储,矩阵的转置
- bash – 递归列出sftp上的所有文件
- WebService大讲堂之Axis2(2):复合类型数据的传递
- angularjs – 如何安装ngSanitize?
- 数组 – Scala:Array.toArray的用例?
- webservice 客户端 调用服务端 进行测试
- angularjs – 关闭AngularStrap popover
- ATLServer WebService 如何返回任意内容的 SOAP 消息给客户