带有 svg 元素的 Angular 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 内容？如果这不可能，有没有其他方法可以干净地做到这一点？

Answer 1

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

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

我最终自己解决了这个问题——我很想知道是否有很好的文档说明为什么以及如何在某处工作。