如何设置属性的元素Angular2

我有一个简单的指令，如下所示：如何设置属性的元素Angular2

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 
     } 
    } 

}

所以，每当我这个指令选择添加到任何标记，我设置了“拼写检查”属性设置为true。

如何以Angular2方式设置此属性？即，做这件事的另一种角度方式是什么。

谢谢。

来源

2017-02-15 zelda

你可以简单地在@Directive声明主机属性如下：

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

而且很明显，你可以删除它使用的是在OnInit（中的setAttribute（））

希望它有帮助。

来源

2017-02-17 07:26:11 ShellZero

它实际上需要是“”attr.spellcheck“：”true“'，它只是'@HostBinding（）'的替代语法。你可以用Angular装饰器做的所有事情都可以用'host：'完成，'@Input（）'，'@Output（）'，'@ViewChild（）'，'@HostListener（）'，... 。 –

@GünterZöchbauer我实际上没有使用attr，而且它也在工作。我不确定哪个是正确的。虽然我没有用attr.spellcheck试试。 – ShellZero

如果绑定到组件输入或DOM元素属性，则不需要'attr.'，否则需要'attr.'。 –

'Angular 2'的方法是使用Renderer。

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

编辑：

正如彼得斯在下面的评论指出，renderer已被弃用，取而代之的renderer2，因此新的命令是：

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

来源

2017-02-15 23:24:15 Adam

我可以使用@HostBinding（）吗？ – zelda

尚未尝试此操作，但链接被破坏如此：https://angular.io/api/core/Renderer#setElementProperty – theSiberman

谢谢，@theSiberman。我更新了答案以使用您的新链接。 – Adam

您可以使用@HostBinding lik Ë

export class Checker { 

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

来源

2017-02-16 06:09:06

如何设置属性的元素Angular2

回答

相关问题