<----extra value----->
`})export class ImgPop" />

在Angular 4中将属性指令应用于组件

angular angular2-directives angular-components angular2-hostbinding

6446 观看

2回复

我创建了具有@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链接

如果我在概念上错了，请纠正我。

谢谢。

作者: Naveen raj 的来源 发布者: 2019 年 10 月 15 日

回应 (2)

2像

决定

根据核心贡献者的回答，无法使用设置组件的直接属性@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->";
    }
}

有关更通用的方法，请参见this。

作者: Max Koretskyi aka Wizard 发布者: 21.05.2017 05:04

1像

仅针对与HTML匹配的选择器实例化指令，这些HTML静态地添加到组件模板中。
无法动态地从元素添加/删除指令。唯一的方法是添加/删除整个元素（例如使用*ngIf

作者: Günter Zöchbauer 发布者: 21.05.2017 08:34
来自类别的问题 :
32x32