Угловой 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? Если это невозможно, есть ли другой способ сделать это чисто?

Answer 1

Решение на самом деле довольно простое. Просто используйте svg: пространство имен для элементов в компоненте, например так:

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

Я в конечном итоге выяснил это сам - я хотел бы знать, если есть хорошая документация о том, почему и как это работает где-то.