角4 - コンポーネント内のsvgへのクラスとパスの追加？

Question

SVGにクラスとパスを動的に追加するにはコンポーネント内にあるときに角4を入力しますか？

私のコンポーネントでは、次のコードをコンポーネントテンプレートに貼り付けるとアイコンが機能します。

<svg class="another-class iconId"> 

<use xlink:href="/icon-path/def.svg#iconId"></use> 

</svg> 

しかし、私はこのようなクラスバインドしようとすると：

<svg class="another-class {{iconId}}"> 

<use xlink:href="/icon-path/def.svg#{{iconId}}"></use> 

</svg> 

を私はエラーを取得：周りに検索した後

Error: Template parse errors: 
Can't bind to ':xlink:href' since it isn't a known property of ':svg:use' 

、私は提案は、これにコードを変更することが見つかりました：

<svg class="another-class {{iconId}}"> 

<svg:use [attr.xlink:href]="/icon-path/def.svg#{{iconId}}"></svg:use> 

</svg> 

tha t次のエラーが表示されます。

Uncaught (in promise): Error: Template parse errors: 
Parser Error: Got interpolation ({{}}) where expression was expected at column 30 in [/icon-path/def.svg#{{iconId}}] 

私はここで間違っていますか？

EDIT：

<svg class="another-class {{iconId}}"> 

<use [attr.xlink:href]="'/icon-path/def.svg#' + iconId"></use> 

</svg> 

はまだ次のエラー取得：麺が提案されているようは、次のことを試みた私はエラーがない<svg class="another-class {{iconId}}">から{{iconId}}を削除したときにコードで

ERROR TypeError: Cannot assign to read only property 'className' of object '[object SVGSVGElement]' 

を、しかし、 svgアイコンも表示されません。 AppModuleで

Answer 1

使用ngClass

[ngClass]="iconId" 
[ngClass]="iconId ? iconId : ''" 
[attr.xlink:href]="'/icon-path/def.svg#' + iconId" 

インポートこれ。 Angular2では固定されていますが、Angular4ではわかりません。

import { CommonModule }  from '@angular/common'; 

Answer 2

これを試してみてください：

<svg class="getIconClass(iconId)"> 
    <svg:use [attr.xlink:href]="getIconPath(iconId)"></svg:use> 
</svg> 

は、関数を作成します。

getIconPath(iconId) { 
    return '/icon-path/def.svg#' + iconId; 
} 

と

getIconClass(iconId) { 
    return 'another-class ' + iconId; 
} 

を私は上記の機能の使用状況を表示するには、既存のplunkerを変更した

また `この人post