Angular2 SVG xlink: href
j'ai un composant pour rendre L'icône 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';
}
cela déclenche une erreur:
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
comment définir dynamic xlink:href ?
2 réponses
éléments SVG doen ont pas de propriétés, donc d'attribut de liaison est nécessaire la plupart du temps (voir aussi Propriétés et Attributs HTML ).
For attribut binding you need
<use [attr.xlink:href]="iconHref">
ou
<use attr.xlink:href="{{iconHref}}">
mise à Jour
la désinfection pourrait causer des problèmes.
voir aussi
- https://github.com/angular/angular/issues/9510 )
- https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizationService-class.html
Update DomSanitizationService va être renommé en DomSanitizer dans RC.6
mise à Jour ceci doit être corrigé
mais il y a une question ouverte pour supporter ceci pour les attributs marqués par un nom https://github.com/angular/angular/pull/6363/files
comme solution de rechange ajouter un autre
xlink:href=""
Angular peut mettre à jour l'attribut mais a des problèmes avec l'ajout.
si xlink:href est en fait une propriété, alors votre syntaxe devrait fonctionner après L'ajout du PR.
j'avais encore des problèmes avec l'attr.xlink: href décrit par Gunter donc j'ai créé une directive qui est similaire à SVG 4 Everybody mais qui est spécifique pour angular2.
Utilisation
<div [useLoader]="'icons/icons.svg#menu-dashboard'"></div>
explication
Cette directive
- icônes de chargement / icônes.plus de détails sur http
- Analyser le réponse et extrait des informations de chemin pour # menu-Tableau de bord
- ajouter l'icône SVG parée au html
Code
import { Directive, Input, ElementRef, OnChanges } from '@angular/core';
import { Http } from '@angular/http';
// Extract necessary symbol information
// Return text of specified svg
const extractSymbol = (svg, name) => {
return svg.split('<symbol')
.filter((def: string) => def.includes(name))
.map((def) => def.split('</symbol>')[0])
.map((def) => '<svg ' + def + '</svg>')
}
@Directive({
selector: '[useLoader]'
})
export class UseLoaderDirective implements OnChanges {
@Input() useLoader: string;
constructor (
private element: ElementRef,
private http: Http
) {}
ngOnChanges (values) {
if (
values.useLoader.currentValue &&
values.useLoader.currentValue.includes('#')
) {
// The resource url of the svg
const src = values.useLoader.currentValue.split('#')[0];
// The id of the symbol definition
const name = values.useLoader.currentValue.split('#')[1];
// Load the src
// Extract interested svg
// Add svg to the element
this.http.get(src)
.map(res => res.text())
.map(svg => extractSymbol(svg, name))
.toPromise()
.then(svg => this.element.nativeElement.innerHTML = svg)
.catch(err => console.log(err))
}
}
}