Angular2 SVG xlink:href [英] Angular2 SVG xlink:href

问题描述

我具有用于渲染SVG图标的组件:

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';
}

这会触发错误:

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元素没有属性，因此大多数时候都需要属性绑定(另请参见

SVG elements doen't have properties, therefore attribute binding is required most of the time (see also 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-b​​rowser/index/DomSanitizationService-class.html

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

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

Update DomSanitizationService is going to be renamed to DomSanitizer in RC.6

更新，该问题应得到解决

，但是对命名空间属性 https://github支持此问题. com/angular/angular/pull/6363/files

but there is an open issue to support this for namespaced attributes https://github.com/angular/angular/pull/6363/files

作为解决方法，请添加其他

As work-around add an additional

xlink:href=""

Angular可以更新属性，但是在添加时存在问题.

Angular can update the attribute but has issues with adding.

如果xlink:href实际上是一个属性，那么您的语法也应该在添加PR后起作用.

If xlink:href is actually a property then your syntax should work after the PR was added as well.

这篇关于Angular2 SVG xlink:href的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！