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

当然，但您可能会考虑将它们重新组合在一起，并将其创建为一个组件。如果你真的不想要那个，你可以使用insertBefore的父nativeElement，并带一点诡计：

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);
}

但同样，更漂亮的方法是创造一个全新的组件，为你做所有这些令人敬畏的工作

Answer 2

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

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

2 个答案: