如何从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 Element.

你需要做的就是以它帮助你解决问题的方式来检查它,就是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 Elements编程方式操作的最佳方法是使用渲染器:

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

编辑

由于Renderer现在已弃用,请使用Renderer2代替setProperty

更新:

这个问题及其答案解释了这一console.log行为.

这意味着,对于这种情况,这console.dir(el.nativeElement)将是DOM Element在控制台中作为"可检查"对象访问的更直接方式.

希望这有帮助.

Answer 2

我建议使用Render,因为ElementRef API文档建议:

...看看Renderer,它提供了可以安全使用的API,即使不支持直接访问本机元素也是如此.依赖于直接DOM访问会在您的应用程序和渲染层之间产生紧密耦合,这使得无法将两者分开并将您的应用程序部署到Web worker或Universal中.

始终使用渲染器,它将使您在使用Universal或WebWorkers时能够使用代码(或您正确的库).

import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';

export class HighlightDirective {
    constructor(el: ElementRef, renderer: Renderer) {
        renderer.setElementProperty(el.nativeElement, 'innerHTML', 'some new value');
    }
}

它看起来并不像Render有一个getElementProperty()方法,所以我想我们仍然需要为那部分使用NativeElement.或者(更好)将内容作为输入属性传递给指令.

Answer 3

这是因为内容

<p myHighlight>Highlight me!</p>

调用HighlightDirective的构造函数时尚未呈现,因此尚无内容.

如果实现AfterContentInit挂钩,您将获得元素及其内容.

import { Directive, ElementRef, AfterContentInit } from '@angular/core';

@Directive({ selector: '[myHighlight]' })

export class HighlightDirective {

    constructor(private el: ElementRef) {
        //el.nativeElement.style.backgroundColor = 'yellow';
    }

    ngAfterContentInit(){
        //you can get to the element content here 
        //this.el.nativeElement
    }
}