I have component for rendering SVG icon:
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';
}
This triggers error:
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
How do I set dynamic xlink:href
?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…