angular - 如何从 Angular 属性指令中访问元素 HTML？

Question

Angular 文档提供了一个示例，用于创建更改元素背景颜色的属性指令:

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 获取元素的内容(例如 Highlight me!)，修改它并更新元素？

Answer 1

所以实际上，我关于您应该执行 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

---

更新以获得更好的方法:

由于这是公认的答案，而且网络 worker 每天都变得越来越重要(而且它被认为是最佳实践)我想在这里添加 Mark Rajcok 的建议。

以编程方式操作 DOM 元素 的最佳方法是使用 Renderer :

constructor(private _elemRef: ElementRef, private _renderer: Renderer) { 
    this._renderer.setElementProperty(this._elemRef.nativeElement, 'innerHTML', 'my new content');
}

编辑

由于 Renderer 现在已弃用，请使用 Renderer2而不是 setProperty

---

更新:

This question with its answer解释了 console.log 行为。

这意味着 console.dir(el.nativeElement) 将是访问 DOM 元素 作为“可检查对象”的更直接方式"在您的控制台中针对这种情况提出异议。

---

希望这对您有所帮助。