如何創建角4

指令元素之後的元素我有一個指令在其中工作的罰款angularjs但它使用jQuery的，現在我想TOT它轉換成角4如何創建角4

舊指令（AngularJS）

app.directive('errName', function() { 
    return { 
     link: function (scope, element, attrs) { 
      element.bind('error', function() { 
       if (attrs.src != attrs.errName) { 
        var name = attrs.errName.split(' '); 
        var attr = '?'; 
        if (name.length == 1) 
        { 
         attr = name[0].substring(1, 0); 
        } 
        if (name.length > 1) 
        { 
         attr = name[0].substring(1, 0) + name[1].substring(1, 0); 
        } 
        $(element).hide(); 
        $(element).after('<span class="thumb-alpha"><span class="default-thumb"><span class="default-thumb-placeholder">' + attr.toUpperCase() + '</span></span></span>'); 
       } 
      }); 
     } 
    } 
});

它只是檢查負載形象有一個錯誤，那麼它隱藏元素，創造一個跨度之後，我改變其在角4名，以顯示縮寫我得到的值隱藏元素，以及，但能不能這

新指令後創建跨度，我嘗試建立：

export class ShowInitialsDirective { 

    @Input() initials; 

    constructor(el: ElementRef, renderer:Renderer) { 
     var element = el.nativeElement 
     renderer.listen(el.nativeElement, 'error', (event) => { 
      var initial_default = '?'; 
      var name = this.initials; 
      name = name.split(' '); 
      if (name.length == 1) 
      { 
       initial_default = name[0].substring(1, 0); 
      } 
      if (name.length > 1) 
      { 
       initial_default = name[0].substring(1, 0) + name[1].substring(1, 0); 
      } 
      this.initials = initial_default; 
      renderer.setElementStyle(el.nativeElement,'display','none'); 
      // element.after('<span class="thumb-alpha"><span class="default-thumb"><span class="default-thumb-placeholder">' + this.initials.toUpperCase() + '</span></span></span>'); 
     }) 
    } 
}

有沒有辦法在它創建範圍，並把這個HTML代碼在它

來源

2017-08-09 Mohit Bumb

當然，但你可能想重寫它一起，並創建成一個組件。如果你真的真的不希望這樣，您可以在nativeElement父使用insertBefore，並用一個小詭計：

const div: HTMLDivElement = document.createElement('div'); 
div.innerHTML = '<span class="thumb-alpha"><span class="default-thumb"><span class="default-thumb-placeholder">' + this.initials.toUpperCase() + '</span></span></span>'; 
const insert: HTMLElement = div.firstChild as HTMLElement; 
const before: HTMLElement = el.nativeElement.nextElementSibling; 
const parent: HTMLElement = el.nativeElement.parentElement; 
if (before) { 
    parent.insertBefore(insert, before); 
} else { 
    parent.appendChild(insert); 
}

但同樣，這樣漂亮是創建一個完全新的組件做這一切真棒爲你工作

來源

2017-08-09 10:22:29 PierreDuc

好，我在哪個範本的img標籤我想利用這個指令一個組件是有可能，我可以使用新的部件和其他組件的img標籤？ –

非常感謝這個作品像魅力除了el.nativeElement.parent;我將其更改爲el.nativeElement.parentElement和它的作品，並感謝:) –

@MohitBumb你是正確的:)寫的未經測試。而且它很難有一個img標籤是內部的組件，所以你應該像'一個新的組件'或類似的東西:) – PierreDuc

在角2+，那麼當你想改變HTML創建組件。組件是帶有html模板的指令。你在這裏創建的指令是一個屬性指令。屬性指令不包含html模板。欲瞭解更多信息，請參閱angular website。

來源

2017-08-09 10:25:55

回答

相關問題