HolderJS的Angular指令-表达式求值无法按预期工作 [英] Angular directive for holderjs - expression evaluation not working as intended

问题描述

我正在尝试在angular2项目中使用出色的 holderjs 库.有人编写了我尝试使用的非常简单的属性指令.

I am trying to use the excellent holderjs library in an angular2 project. Someone wrote up a very simple attribute directive which I am trying to use.

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

holderjs is basically a client side image placeholder generator.

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

I am trying to modify the directive so that I can pass dynamic placeholders.

例如，这有效:

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

但是这些不是:

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

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

The angular directive is really a simple wrapper that runs Holderjs inside it. I've tried moving the code to ngOnInit as well as tried to specify data-src as an @Input but haven't had success so far.

有什么想法吗?我设置了一个插件来演示该问题: https://plnkr.co/edit/ibOyJvmNWadQWOm6Ki7u?p = info

Any ideas? I've set up a plunker to demonstrate the issue: https://plnkr.co/edit/ibOyJvmNWadQWOm6Ki7u?p=info

该代码位于home.page.ts&中； html

The code is in home.page.ts & html

核心问题是holderjs基于data-src中提供的URL插入src img标签，但是在使用表达式求值或绑定(向指令添加@Input)时，不会创建src标签

The core problem is holderjs inserts a src img tag based on the URL provided in data-src but when using either expression evaluation or binding (adding an @Input to the directive), the src tag doesn't get created.

推荐答案

您应该了解有关您的问题的两件事:

You should know two things about your problem:

• Anguler在编译器中剥离了data-前缀(其背后的思想是人们可以使用绑定为非标准属性添加前缀)，因此您必须使用类似于以下内容的属性绑定:

• Anguler is stripping the data- prefix in the compiler (the idea behind this was that people could prefix non-standard attributes with bindings) so you have to use attribute binding looking something like:

attr.data-src="{{myvariable}}"或[attr.data-src]="myvariable"

在调用ngAfterViewInit之前，不会出现属性绑定，因此您应该在ngAfterViewInit钩子内触发插件:

Attribute binding won't be appeared until ngAfterViewInit is called therefore you should fire your plugin inside ngAfterViewInit hook:

holderjs.directive.ts

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

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

柱塞示例

Plunker Example

这篇关于HolderJS的Angular指令-表达式求值无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！