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添加任何内容

1 个答案: