Angular中输入和跨度之间的文本绑定答案

【问题标题】：Text binding between input and span in AngularAngular中输入和跨度之间的文本绑定
【发布时间】：2019-03-05 21:16:32
【问题描述】：

如何在 Angular6 中将输入文本绑定到 span innerHTML？

ts 文件

...
finance_fullname: string;
...

模板文件

<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname" ngBind="finance_fullname"></span>

【问题讨论】：

【解决方案1】：

我可以说最安全的方式是innerText 或textContent。

<span class="fullname" [textContent]="finance_fullname"></span>
<span class="fullname" [innerText]="finance_fullname"></span>

甚至 AngularJS 也使用textContent 进行单向绑定。它仅extract 模型值并直接在指定的html节点内转储。即使您传递html，它也会将该html 作为文本（解码的html）添加到页面上。

innerHTML 也适用于您，但它可能很危险，因为它可能会以 html 的形式在页面上注入恶意内容。

【讨论】：

对于不同的 html 节点元素文本属性更深入的解释：stackoverflow.com/questions/24427621/… 注意不建议使用innerHTML，除非您特别打算插入 HTML 并采取预防措施以避免XSS 攻击

【解决方案2】：

你可以通过两种方式做到这一点

(i) 您可以使用 [innerHTML]

<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname" [innerHTML]="finance_fullname"></span>

(ii) 只需使用双向数据绑定进行绑定

<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname">{{finance_fullname}}</span>

【讨论】：

【解决方案3】：

我不知道您为什么要从 angularjs 阅读，因为您正在使用 angular 6。如果你想要双重绑定，就这样做吧。

<input type="text" id="finance_fullname" [(ngModel)]="finance_fullname">
<span class="fullname">{{finance_fullname}}</span>

【讨论】：

是表格？因为如果你有很多输入，你只需在你的 ts 表单中输入：any = {} 然后在你的 html [(ngModel)]="form.finance_fullname" 中，它应该可以工作
我想出了这个，这不起作用，因为我在 ts 文件中声明了变量“finance_fullname”，一旦我删除了所有声明的变量，这也可以正常工作。提前致谢。