在Angular 4中的组件上应用属性指令
我创建了具有@Input()绑定属性src的img-pop组件。 我创建了具有@HostBinding()属性src的authSrc指令。
@Component({
selector: 'img-pop',
template: `<img [src]="src"/>
<div *ngIf="isShow">
<----extra value----->
</div>`
})
export class ImgPopOverComponent implements OnInit {
@Input()
private src;
private isShow=false;
@HostListener('mouseenter') onMouseEnter() {
this.isShow= true;
}
@HostListener('mouseleave') onMouseLeave() {
this.isShow= false;
}
}
我有这样的指令。
@Directive({ selector: '[authSrc]' })
export class AuthSrcDirective implements OnInit {
@HostBinding()
private src: string;
constructor(private element: ElementRef) { }
ngOnInit() { }
@Input()
set authSrc(src) {
this.src = src+"?access_token=<-token->";
}
}
我想把两种功能结合起来。
<img-pop [authSrc]="/api/url/to/image"></img-pop>
所以最终的url调用将会是/ api / url / to / image？access_token = < - token - >
但它会抛出Can't bind to 'src' since it isn't a known property of 'img-pop'. 错误
plnkr链接
如果我在概念上错了，请纠正我。
谢谢。
根据核心贡献者的回答，使用@HostBinding无法设置组件的直接属性。 @HostBinding始终直接绑定到DOM。 所以这是设计。 这里是解释：
这按预期工作，如下所示：
所以，就你而言，这是可能的解决方案：
export class AuthSrcDirective {
// inject host component
constructor(private c: ImgPopOverComponent ) { }
@Input()
set authSrc(src) {
// write the property directly
this.c.src = src + "?access_token=<-token->";
}
}
对于更通用的方法，请参阅此。
指令仅针对与静态添加到组件模板中的HTML相匹配的选择器实例化。
无法动态地从元素添加/删除指令。 唯一的方法是添加/删除整个元素（例如使用*ngIf