ディレクティブを使用してレンダラーで属性を追加する

Question

属性を持つHTMLタグを拡張したいが、これを角度2のコンポーネントでカプセル化したい。私はディレクティブを実装してみましたが、私は把握することができませんでし

<div some-other-fancy-attribute="x"></div> 

まず：

は、fooという属性は次のようにdiv要素を変換する必要があるのは、私の角度2の成分fooの

<div foo="x"></div> 

を使用して、元のマークアップを想定してみましょうangle/coreのRendererを使ってホスティング要素に別の属性を追加する方法

次に、[foo]のような属性セレクタを使ってAngular 2コンポーネントについて読みました。私はテンプレートを使用して他のファンシーな属性をレンダリングするという考えが好きでした。

しかし、テンプレート、私はで終わるそれでは、タグの後にレンダリングされます：

<div foo="x">some-other-fancy-attribute="x" 

はそこにいくつかの属性の作成をカプセル化する簡単な方法はないですか？ これは些細なことだと思っていましたが、予想よりも頭痛が増えています。

Answer 1

私はあなたを正しく理解していれば あなたのアイデアは良いです、動作するはずです！

このplunkerを参照してください：https://plnkr.co/edit/YctUpK9r9AqIk0D1qvgZ?p=preview

import {Component, Directive, NgModule, ElementRef, Renderer, ViewChild} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Directive({ 
    selector: '[foo]' 
}) 
export class MyFancyDirective { 

    constructor (private _elRef: ElementRef, private _renderer: Renderer) { console.log('!'); } 

    ngOnInit() { 
    this._renderer.setElementAttribute(this._elRef.nativeElement, 'another-fancy-attribute', 'HERE I AM !!'); 
    } 

} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2 #header foo (click)="headerClicked()">Hello {{name}}</h2> 
    </div> 
    `, 
}) 
export class App { 

    @ViewChild('header') header: ElementRef; 

    name:string; 
    constructor() { 
    this.name = 'Angular2' 
    } 

    headerClicked() { 
    console.dir(this.header.nativeElement.attributes['another-fancy-attribute'].value); 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, MyFancyDirective ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Answer 2

我々はRenderer2クラス

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

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