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

但是,它抛出一个错误说:无法绑定到'data-url',因为它不是已知的本机属性

有人可以帮忙吗？谢谢.

Answer 1

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

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

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

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

见plunkr.