holderjs的角度指令 - 表達式評估不按預期工作

Question

我想在angular2項目中使用優秀的holderjs庫。有人wrote up一個非常簡單的屬性指令，我試圖使用。

holderjs基本上是一個客戶端圖像佔位符生成器。

我想修改指令，以便我可以傳遞動態佔位符。

例如，這個工程：

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

但這些並不：

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

角度指令是真正運行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