javascript - Angular 中输入和跨度之间的文本绑定(bind)

Question

如何在 Angular6 中绑定(bind)输入文本以跨越 innerHTML？

ts 文件

...
finance_fullname: string;
...

模板文件

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

Answer 1

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

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

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

Demo

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