アングル2でアトリビュート・ディレクティブを作成してプロパティにバインドする方法は？

Question

カスタム属性ディレクティブを作成し、これをプロパティにバインドしたいとします。この属性を取得して後で値を取得する予定です。

私は指令を作成しました：このディレクティブを使用するコンポーネントである

@Directive({ 
    selector: '[data-url]' 
}) 

export class DocumentURL{ 
    constructor(private el: ElementRef, private renderer: Renderer) { } 
} 

：

@Component({ 
    templateUrl: 'some.component.html', 
    directives: [DocumentURL] 
}) 

これは私のsome.component.htmlです：

<div class="col-xs-6" [data-url]='docUrl' (mouseleave)='onMouseLeave($event)'> 

しかし、 既知のnativではないため、 'data-url'にバインドできませんeプロパティ

誰か助けてもらえますか？ありがとう。

Answer 1

@Inputプロパティをディレクティブに追加する必要があります。

@Directive({ 
    selector: '[data-url]' 
}) 
export class DocumentURL{ 

    @Input('data-url') 
    dataUrl:string; 

    constructor(private el: ElementRef, private renderer: Renderer) { } 
} 

plunkrを参照してください。