angular2:使用*ngIf构建svg图标不会给DOM添加任何内容

angular2: building svg icons with *ngIf adds nothing to DOM

本文关键字：DOM 添加 任何内 图标 使用 ngIf svg 构建 angular2      更新时间：2023-09-26

我正在使用icoMoon导入一些SVG图标。

我想使用ngIf构建的html遵循以下模式：

<div class="contactIcon">
    <svg class="icon icon-envelop">
        <use xlink:href="symbol-defs.svg#icon-envelop"></use>
    </svg>
</div>

所以我正在导出具有图标和xlink属性的图标数组：

export class NavigationComponent {
    icons = [{
            icon: 'icon icon-envelop',
            xlink: 'symbol-defs.svg#icon-envelop'
        },
        {
            icon: 'icon icon-facebook2',
            xlink: 'symbol-defs.svg#icon-facebook2'
        },
        {
            icon: 'icon icon-linkedin',
            xlink: 'symbol-defs.svg#icon-linkedin'
        },
        {
            icon: 'icon icon-mobile',
            xlink: 'symbol-defs.svg#icon-mobile'
        }];
}

我的html看起来是这样的：

<div *ngFor="#i of icons" class="contactIcon">
    <svg [attr.class]="i.icon">
        <use [attr.xlink:href]="i.xlink"></use>
    </svg>
</div>

但当我检查页面时，没有添加任何内容，控制台中也没有显示任何错误。我看到的只是这个评论：

<!--template bindings={}-->

有人能指出我做错了什么吗？

据我所知，解决方法是静态添加xlink:href属性。绑定可以修改这样的SVG属性，仅添加是不起作用的。这是一些潜在的浏览器问题。聚合物也遭受同样的痛苦：

<div *ngFor="#i of icons" class="contactIcon">
    <svg [attr.class]="i.icon">
        <use xlink:href="" [attr.xlink:href]="i.xlink"></use>
    </svg>
</div>
相关文章：