如何在Angular 2中创建属性指令并将其绑定到属性?

时间:2016-09-26 19:29:03

标签: angular

我想创建一个自定义属性指令并将其绑定到一个属性。我计划检索此属性并稍后获取值。

我创建了一个指令:

@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;因为它不是一个已知的原生财产

有人可以帮忙吗?感谢。

1 个答案:

答案 0 :(得分:6)

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

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

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

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

请参阅plunkr