angular - Angular2 SVG xlink:href

Question

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ですか?

Answer 1

SVG 要素にはプロパティがないため、ほとんどの場合、属性バインディングが必要です ( 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

RC.6 では更新プログラムDomSanitizationServiceの名前が に変更されます。DomSanitizer

更新これは修正する必要があります

しかし、名前空間属性https://github.com/angular/angular/pull/6363/filesに対してこれをサポートする未解決の問題があります

回避策として、追加の

xlink:href=""

Angular は属性を更新できますが、追加に問題があります。

xlink:hrefが実際にプロパティである場合、PR が追加された後も構文が機能するはずです。

Answer 2

Gunterによって記述された attr.xlink:href にまだ問題があったため、 SVG 4 Everyoneに似ているがangular2 に固有のディレクティブを作成しました。

使用法

<div [useLoader]="'icons/icons.svg#menu-dashboard'"></div>

説明

このディレクティブは

1. http 経由で icons/icons.svg を読み込む
2. 応答を解析し、#menu-dashboard のパス情報を抽出します
3. 解析された svg アイコンを html に追加します

コード

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))
        }
    }
}