Jak mogę zagnieździć dyrektywy renderujące SVG w Angular 2? - kątowe, svg

Stworzyłem składnik, który renderuje SVG, którydziała w porządku. Jednak chciałbym zawrzeć część tego pliku SVG w osobnym komponencie. Jednak gdy to robię, wewnętrzny plik SVG nie jest renderowany - co, jak sądzę (nie wiem tyle o SVG), jest spowodowane znacznik komponentu nie jest prawidłowym elementem SVG.

Przykład można zobaczyć w to Plnkr. Tekst wewnątrz inner-svg-example nie wyświetla się. Gdy jednak edytujesz stronę w narzędziach programistycznych i usuniesz dyrektywę internal-svg-example, jest pokazane.

Ponieważ Angular 2 przestał działać replace opcja w dyrektywach, jaki byłby najlepszy sposób, aby to naprawić?

Odpowiedzi:

Zamiast używać selektor elementów

<inner-svg-example></inner-svg-example>

używając go jako selektor atrybutu na jakimś ważnym znaczniku svg, takim jak g rozwiązuje to

<g inner-svg-example></g>

Więcej należy podać svg: przed elementem svg, który ma zostać dodany, w twoim przypadku jest to

<text>...</text>

do

<svg:text>...</svg:text>

Oparte na ten wpis na blogu
Z pomocą Odpowiedź Johna na inne podobne pytanie
Demo Plnkr

Twój plnkr używał wcześniejszych wersji angular2, zmienić dziennik za wsparcie svg