Angular2在标签中插入自定义属性与指令

Question

我有一个角度2项目，我正在使用PrimeNG。 我正在使用一个特殊的标签，其中有很多自定义属性，这些标签的属性始终相同。 我想要外部化这些属性，并创建了一个自定义指令，用于添加我需要的所有属性。 问题是，其中一些属性不是本机的，也许它们不被识别。我得到无法执行对 '元素' 的setAttribute“错误”： '[myCustomAttribute]' 不是一个有效的属性名称

这是我的指令：

@Directive({ 
 
    selector: '[def-calendar]' 
 
}) 
 
export class DefaultCalendarDirective { 
 

 
    constructor(private _elRef: ElementRef, private _renderer: Renderer2) { 
 
    } 
 

 
    ngOnInit() { 
 
    this._renderer.setAttribute(this._elRef.nativeElement, '[yearRange]', '1900:2100'); 
 
    } 
 
}

任何人都知道我该如何修复它？ 我不知道是否有办法复制字符串等元素并操纵字符串，添加我的属性

谢谢 Fa brizio

Answer 1

您不能使用renderer.setAttribute(...)来设置不属于您使用的本机HTML元素的属性。
yearRange甚至不是任何原生HTML元素的准确属性。它应该以它正确地设定值来声明为类指令的输入：

@Directive({ 
    selector: '[def-calendar]' 
}) 
export class DefaultCalendarDirective implements OnInit { 

    @Input() yearRange: string = '1900:2100'; 

    constructor() { 
    } 

    public ngOnInit() {} 
} 

您还可以通过它传递一个字符串改变输入值（或者你也可以使用绑定代替）时你在一个元素上使用指令。

<someElement def-calendar yearRange="1900:2100"></someElement> 

Answer 2

这可能对您有用。 Angular2 add attribute with Renderer using a directive。

我认为yearRange之间的方括号是罪魁祸首。希望这可以帮助。

Answer 3

我们可以使用的setAttributeRenderer2类

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

@Directive({ 
    selector: '[DirectiveName]' 
}) 
export class DirectiveNameDirective { 
constructor(public renderer : Renderer2,public hostElement: ElementRef){} 
ngOnInit() { 
     this.renderer.setAttribute(this.hostElement.nativeElement, "data-name", "testname"); 
     } 
    }