既存のDOM要素への動的バインディング変数

Question

動的に読み込まれたSVGを表示するコンポーネントがあります。 Svgが変数svgSelectorにロードされています。コンポーネントテンプレートはシンプルです：

<div #selectorContainer [innerHTML]="svgSelector | safeHtml"></div> 

これまでのところすべてが正常です - SVGが正しく表示されます。今、いくつかの要素の属性を変数にバインドしたいと思います。例えば。私が持っているinsinde SVG：

<path fill="#00ff00" d="m1319.0166 570.7281l17.700806 0l0 26.771667l-17.700806 0z" fill-rule="evenodd"></path> 

私は変数にfill属性の値をバインドしたいと思います。どうすればいいのですか？

私はselectorContainerへの参照を取得し、私はそれを用意してください。

@ViewChild('selectorContainer') selectorContainer: ElementRef; 
ngAfterViewInit() { 
    this.selectorContainer.nativeElement.querySelector('svg') // <-- my SVG DOM element 

} 

次は何？この動的に作成されたDOM要素に変数を動的にバインドする方法はありますか？

Answer 1

大括弧で囲んで試しました[]？すなわち

<path [fill]="varName" ... ></path> 

か{{}}を使用していますか？すなわち

<path fill={{varName}} ... ></path>