如何创建角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

如何创建角4

回答

相关问题