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

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元素的更直接的方法.

希望这有帮助.

原文地址：https://www.jb51.cc/angularjs/140368.html