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

然而，这是一个错误说： 无法绑定到＆＃39; data-url＆＃39;因为它不是一个已知的原生财产

有人可以帮忙吗？感谢。

Answer 1

您必须在指令中添加@Input属性。

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

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

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

请参阅plunkr。