Angular中的ng-bind等价

Question

我在angularjs中使用过ng-bind，如下所示

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

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

我试过了

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

但不走运，你知道吗？

Answer 1

当然，当您希望函数的返回值出现在某个HTML string主体中的某个内联位置时，{{ getVal() }}将按照JB Nizet的建议工作。然而，你真正想要的是...

Angular 1 Style:

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

变成了...

Angular 2+ ng-bind等效项：

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

Angular 2+ ng-bind-html等价物：

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

Answer 2

添加到@Luvaas answer如果您正在寻找来自对象的绑定数据值，则可以使用以下内容：

Angular 1路：

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

Angular [textContent]**:** ng-bind中的可以与 2+一起使用

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

与ng--html等效的Angular 2+是bind

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