Question

我正在尝试在angular2项目中使用优秀的holderjs库。某人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，但目前尚无成功。

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

代码在home.page.ts＆amp; HTML

核心问题是holderjs根据src中提供的URL插入data-src img标记但是当使用表达式求值或绑定（向指令添加@Input）时，src标记不会＃39; t得到了。

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

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

1 个答案: