将动态html添加到角度组件答案

【问题标题】：Add dynamic html to angular component将动态html添加到角度组件
【发布时间】：2017-10-12 06:11:06
【问题描述】：

我有一个类似于 textEditor(contentEditable div) 的角度组件。它有它的html模板。现在根据用户输入的内容，我还想添加一些动态 html。像这样的东西：-

<span class="macro consolas-text" (click)="OpenPopup()"></span>

我可以将此 html 动态添加到我的 html 模板中，但我无法调用此函数“OpenPopup”。我认为 Angular 无法识别这个跨度，因为它是动态添加的。

我怎样才能让它工作？

【问题讨论】：

你是如何将 html sn-p 动态添加到 html 模板中的？也许你使用的函数没有像你想象的那样添加它。
我只是使用字符串连接创建整个跨度。我没有使用任何 document.createElement() 和其他操作。这是一个现有的代码，它曾经在角度 1 中工作，但 OpenPopup() 并没有坐在角度控制器或服务中。这是一个纯 JavaScript 函数。当从角度 1 迁移到角度 2 时，这是破坏性的。
您的 Angular 1 项目如何知道在哪里可以找到 OpenPopup() 函数？你能为 Angular 2 模拟这个过程吗？
这是一个 angularjs 属性指令，根据用户在文本框中输入的内容创建动态 html。我们没有使用 ng-click 而是 onclick="OpenPopup()"。这是有效的，因为这个 OpenPopup() 函数存在于全局范围内，因为它是一个纯 JavaScript 函数。
您能访问组件类中的OpenPopup() 函数吗？你可以试试declare function OpenPopup; 然后使用它。

标签： angular

【解决方案1】：

如果要分配变量，请使用 innerHTML 属性绑定

<span class="macro consolas-text" (click)="OpenPopup('sometext')" [innerHTML]="sometext"></span>

如果你想分配一些文字，使用' '

<span class="macro consolas-text" (click)="OpenPopup('sometext')" [innerHTML]="'some text'"></span>

【讨论】：