Question

我有一个简单的Directive如下：

import { Directive, OnInit, OnDestroy, ElementRef } from "@angular/core";

@Directive({
    selector: "[Checker]"
})
export class Checker {

    constructor(private e: ElementRef) {

    }

    OnInit() {
        this.e.nativeElement.setAttribute("spellcheck", "true");
    }

    keyFunc(event: KeyboardEvent) {
        if (event.keyCode == 74) {
            //more functionality
        }
    }

}

因此，每当我将此指令选择器添加到任何标记时，我都会将spellcheck属性设置为true。

如何以Angular2方式设置此属性，即执行此操作的替代Angular方法是什么？

Answer 1

您使用@HostBinding喜欢

export class Checker {

  @HostBinding('attr.spellcheck')
  spellcheck:boolean = true;

Answer 2

＆＃39; Angular 2＆＃39;方法是使用Renderer。

this.renderer.setElementAttribute(e.nativeElement, "spellcheck", "true");

修改

正如PeterS在下面的评论中指出的那样，renderer已被弃用，而不是renderer2，因此新命令将是：

this.renderer2.setAttribute(e.nativeElement, "spellcheck", "true")

Answer 3

您只需在host中声明@Directive属性，如下所示：

@Directive({
    selector: "[Checker]",
    host: { "spellcheck":"true" }
})

显然，您可以删除setAttribute()中使用的ngOnInit()。

如何在Angluar 2中的元素上设置属性？

3 个答案: