html 元素属性访问,您如何从Angular 2属性指令内访问元素HTML?

这篇博客探讨了如何在Angular中正确地使用ElementRef和Renderer来获取和设置DOM元素的内容。作者建议使用console.dir(el.nativeElement)来更方便地检查DOM元素,并提供了通过Renderer编程式操纵DOM的示例,以避免直接操作DOM的不良实践。
摘要由CSDN通过智能技术生成

所以实际上,我应该做一个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');

}

更新:

这意味着console.dir(el.nativeElement)将作为这种情况的控制台中的“可检查”对象访问DOM元素的更直接的方法.

希望这有帮助.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值