指令でタグに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'); 
 
    } 
 
}

誰でもどのように修正できますか？ 文字列などの要素をコピーして、属性を追加する文字列を操作する方法があるかどうかわかりません。 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。

年の間に角括弧があると思います。範囲は犯人です。お役に立てれば。

Answer 3

我々はRenderer2クラス

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