动态绑定变量到现有的 dom 元素答案

【问题标题】：Dynamic binding variables to existing dom elements动态绑定变量到现有的 dom 元素
【发布时间】：2018-05-22 17:01:30
【问题描述】：

我有一个显示动态加载的 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 元素？

【问题讨论】：

标签： javascript angular data-binding angular5

【解决方案1】：

你试过用方括号括起来[]吗？即

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

或者使用{{}}？即

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

【讨论】：

我写道，我从后端动态获取 SVG。