Angular holderjs 指令 - 表达式评估未按预期工作

Question

我正在尝试使用优秀的 holderjs library in an angular2 project. Someone wrote up 我正在尝试使用的非常简单的属性指令。

holderjs 基本上是一个客户端图像占位符生成器。

我正在尝试修改指令以便我可以传递动态占位符。

例如，这个有效：

<img holderjs data-src="holder.js/200x200/auto">

但这些不是：

<img holderjs data-src="{{myvariable}}"> 
<img holderjs [data-src]="myvariable">

angular 指令实际上是一个在其中运行 Holderjs 的简单包装器。我已经尝试将代码移动到 ngOnInit 并尝试将 data-src 指定为 @Input 但到目前为止还没有成功。

有什么想法吗？我已经设置了一个 plunker 来演示这个问题：https://plnkr.co/edit/ibOyJvmNWadQWOm6Ki7u?p=info

代码在home.page.ts & html

核心问题是 holderjs 根据 data-src 中提供的 URL 插入一个 src img 标签，但是当使用表达式评估或绑定时（向指令添加 @Input )，不会创建 src 标签。

Answer 1

关于您的问题，您应该知道两件事：

Anguler 正在去除编译器中的 data- 前缀（这背后的想法是人们可以在非标准属性前面加上绑定）所以你必须使用属性绑定看起来像:

attr.data-src="{{myvariable}}"或[attr.data-src]="myvariable"
在调用 ngAfterViewInit 之前不会出现属性绑定，因此您应该在 ngAfterViewInit 钩子中触发您的插件：

holderjs.directive.ts

@Directive({
  selector: '[holderjs]',
})
export class HolderjsDirective {
  constructor(public el: ElementRef) {}

  ngAfterViewInit() {
     Holder.run({images:this.el.nativeElement});
  }
}

Plunker Example

Angular holderjs 指令 - 表达式评估未按预期工作

Angular directive for holderjs - expression evaluation not working as intended

angular2-directives

angular