angular2：使用 *ngIf 构建 svg 图标对 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>

所以我正在导出带有图标和 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 属性。绑定可以修改此类 SVG 属性，仅添加不起作用。这是一些潜在的浏览器问题。聚合物也一样：

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

angular2：使用 *ngIf 构建 svg 图标对 DOM 没有任何帮助

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

javascript

svg

angular-ng-if

angular