使用Angular创建SVG匹配组件与SVG元素。

Question

考虑以下组件，它匹配<svg icon="close"></svg>，用于显示图标：

@Component({
    selector: 'svg[icon]',
    template: `<use [attr.xlink:href]="'icons.svg#'+icon"></use>`
})
export class SvgIconComponent {
    @Input() icon: string;
}

这种情况下会失败，因为Angular无法找到<use>元素，它不知道组件内容在<svg>中。如果Angular能够注意到selector确保了这个事实就好了，但它并没有。

具体的错误信息如下：

Uncaught Error: Template parse errors:
'use' is not a known element:
    1. If 'use' is an Angular component, then verify that it is part of this module.
    2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. 

很明显，我可以在组件的模块上放置“NO_ERRORS_SCHEMA”，但我不愿意这样做，因为模块中还有其他组件，并且因为我希望未知元素错误检查能够起作用。

那么，我该如何告诉Angular它应该将这个特定组件的内容视为SVG内容？如果这不可能，是否还有其他干净的方法来解决这个问题？

- Yona Appletree

Answer 1

解决方案其实很简单。只需在组件中的元素中使用svg:命名空间即可，如下所示：

<svg:use [attr.xlink:href]="'icons.svg#'+icon"></svg:use>

我最终自己解决了这个问题 - 我很想知道是否有关于为什么以及如何运作的良好文档。

- Yona Appletree

---

嗨Yona，我其实也在考虑同样的问题；我找到的唯一一个至少有些解释的来源是Tero的这篇博客：https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html - Sergey Rudenko