Angular 中的 ng-bind 等效项答案

【问题标题】：ng-bind equivalent in AngularAngular 中的 ng-bind 等效项
【发布时间】：2016-01-14 08:07:57
【问题描述】：

我已经像这样在 angularjs 中使用了 ng-bind

<div ng-bind="getVal()"></div>

getVal() 返回一些值并且它在控制器中。但是在 Angular2 中，我在组件中有一个函数 getVal() ，我需要从模板中调用它，就像 angular1 一样。

我试过了

<div [(ngModel)]="getVal()"></div>

但运气不好，有什么想法吗？

【问题讨论】：

标签： angular

【解决方案1】：

当然，{{ getVal() }} 将按照 JB Nizet 的建议工作，当您希望函数的返回值出现在某个 HTML 字符串的主体内的某个位置时。然而，你真正追求的是……

Angular 1 样式：

<div ng-bind="getVal()"></div>

变成...

Angular 2+ ng-bind 等效：

<div [textContent]="getVal()"></div>

Angular 2+ ng-bind-html 等效：

<div [innerHtml]="getVal()"></div>

【讨论】：

对于 ng-bind 应该是 <div [textContent]="getVal()"></div> 对于 ng-bind-html <div [innerHtml]="getVal()"></div>
不应该将@JamiePate 的评论与答案结合起来吗？ ng-bind 和 [innerHtml] 不一样...
@toxaq，我整合了添加内容。

【解决方案2】：

添加到@Luvaas 答案如果您正在寻找来自对象的绑定数据值，可以使用以下方法：

Angular 1 方式：

<div ng-bind="car.color"></div>

在 Angular 2+ 中，ng-bind 可以与 [textContent] 一起使用：

<div [textContent]="car.color"></div>

ng-bind-html 的 Angular 2+ 等价物是 [innerHtml]:

<div [innerHtml]="car.template"></div>

【讨论】：