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"); 
     } 
    }