我有用于呈现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
如何设置dynamic xlink:href？