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

Question

如何在Angular6中绑定输入文本以跨越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用于单向绑定.它只是extract模型值并直接在指定的html节点内转储.即使你传递了html它,也会在页面上添加html作为文本(解码的html).

演示

innerHTML 也适合你,但它可能是危险的,因为它将有机会以html的形式在页面上注入恶意内容.