javascript - Angular 2 : building svg icons with *ngIf adds nothing to DOM

Question

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

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

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

所以我要导出带有 icon 和 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={}-->

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

Answer 1

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

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