Angular 2+使用“onChange”功能在div上动态添加html文本答案

【问题标题】：Angular 2+ add dynamically html text on div with "onChange" functionAngular 2+使用“onChange”功能在div上动态添加html文本
【发布时间】：2018-12-18 17:06:07
【问题描述】：

我开发了一个应用程序，该应用程序可以在 select 元素中的值发生更改时动态更改 div 元素中的 HTML 文本。

在 HTML 中：

<div id="update"></div>

在打字稿中：

$('#update').html(`<input type="file" (change)="onFileChanged($event)">`

它有效。当我选择一个文件时，该函数不会被调用。

【问题讨论】：

最好的做法是尽量避免在 Angular 应用程序中使用 jquery。
jQuery 无法编译 Angular 代码。您正在尝试在运行时呈现需要编译的角度脚本。要做到这一点，要么完全避免使用 jQuery，要么使用 Angular 的动态组件创建 netbasal.com/… 。在任何情况下，您都可能以错误的方式接近它，因为这似乎是一项简单的任务，完全可以在没有 jQuery 的情况下使用 Angular 完成。
为什么要动态添加？不是暗示你不应该，只是想了解一下我是否可以提供帮助。
需要动态整合html文本，因为它不适用于ngModule特别*ngIf。如果我在一个div框里设置一个flag（比如*ngIf = "x === 1），只会在编译时检查，如果改变了select框的值，html文本不会改变.

标签： javascript jquery html angular

【解决方案1】：

试试这个；

var html = $compile('<input type="file" (change)="onFileChanged($event)"')($scope);
 $('#update').html(html);

【讨论】：

这个过程在 Angular 2 中不再起作用。$compile 随着 NgModule 的引入而被废除。

【解决方案2】：

删除 jquery 代码并为 div 设置一个标志。当用户点击按钮时，标志应该改变。根据标志状态，你可以设置你的文字。

【讨论】：

如果我在一个div框里设置了一个flag（比如*ngIf = "x === 1），只会在编译时检查，如果select框的值为改变了，html文本不会改变。