Angular2 SVG xlink：href

我有渲染SVG图标的组件：

import {Component,Directive} from 'angular2/core';
import {COMMON_DIRECTIVES} from 'angular2/common';

@Component({
  selector: '[icon]',directives: [COMMON_DIRECTIVES],template: `<svg role="img" class="o-icon o-icon--large">
                <use [xlink:href]="iconHref"></use>
              </svg>{{ innerText }}`
})
export class Icon {
  iconHref: string = 'icons/icons.svg#menu-dashboard';
  innerText: string = 'Dashboard';
}

这会触发错误：

EXCEPTION: Template parse errors:
  Can't bind to 'xlink:href' since it isn't a kNown native property ("<svg role="img" class="o-icon o-icon--large">
<use [ERROR ->][xlink:href]=iconHref></use>
  </svg>{{ innerText }}"): SvgIcon@1:21

如何设置动态xlink：href？

SVG元素没有属性,因此大多数时间都需要属性绑定(另见 Properties and Attributes in HTML).

对于属性绑定,您需要

<use [attr.xlink:href]="iconHref">

要么

<use attr.xlink:href="{{iconHref}}">

更新

消毒可能会导致问题.

也可以看看

> https://github.com/angular/angular/issues/9510)
> https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizationService-class.html

更新DomSanitizationService将在RC.6中重命名为DomSanitizer

更新这个应该是固定的

但是有一个开放的问题来支持命名空间属性https://github.com/angular/angular/pull/6363/files

作为解决方案添加一个额外的

xlink:href=""

角度可以更新属性,但添加问题.

如果xlink：href实际上是一个属性,那么你的语法也可以在PR被添加之后工作.