javascript - 如何在 Angular 4 中的指令元素之后创建元素

Question

我在 angularjs 中有一个指令，它工作正常，但它使用 jQuery，现在我想在 Angular 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>');
                }
            });
        }
    }
});

它只是检查加载时图像中是否存在错误，然后隐藏该元素并创建一个跨度，之后我在 Angular 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>');
        })
    }
}

有没有办法在其中创建span并将此html代码放入其中

Answer 1

在 Angular 2+ 中，当您想要更改 html 时，应该创建一个组件。组件是带有 html 模板的指令。您在此处创建的指令是属性指令。属性指令不包含 html 模板。更多信息请引用angular website .