如何在Angular 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)'> 

然而，它是拋出一個錯誤說： 無法綁定到'數據網址'，因爲它不是一個已知的本地e property

有人可以幫忙嗎？謝謝。

Answer 1

您必須在您的指令中添加@Input屬性。

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

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

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

請參閱plunkr。