Angular 2 单向 HTML 数据绑定，就像我们在 Angular 1 中使用 ::答案

【问题标题】：Angular 2 one way data binding on HTML like we do in angular 1 using ::Angular 2 单向 HTML 数据绑定，就像我们在 Angular 1 中使用 ::
【发布时间】：2017-12-17 18:00:33
【问题描述】：

在 Angular 2 中有什么方法可以像在 Angular 1 中那样实现单向数据绑定。

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
<h4>please change the text box value to see the scenario</h4>
  <p>Name : <input type="text" ng-model="name" 
ng-init="name='change me '"></p>
  <h1>Hello {{name}}</h1>
<h2>One-way binding- </h2>
{{::name}}
</div>

</body>
</html>

我们如何以 Angular 2 的方式实现这一点。我们有什么替代方案。

注意：我不想仅反映 HTML 上的更改。我需要更新后的值@component end，但我不想只在 UI 上显示更改

【问题讨论】：

供您参考。 angular1 通过 ng-model="name" 进行 2 路绑定
请仔细阅读问题。 ng-model 的工作方式类似于 2 方式，但在 HTML 上，您可以看到我正在访问“名称”@Wasif-Khan 的两个地方
:: 不是单向绑定，是一次性绑定

标签： javascript angularjs angular2-template two-way-binding

【解决方案1】：

Angular 2 中的双向数据绑定如下所示：

<input type="text"  [(ngModel)]="name">

Angular2 中的一种数据绑定方式是通过删除括号来实现的，即 [ngModel]

<input type="text"  [ngModel]="name" (ngModelChange)="onChange($event)">
onChange(newvalue) {
//work with newvalue
}

希望对你有帮助！

【讨论】：

好的，但这将如何在 {{name}} 部分工作。如果是一种方式，它是否会更新并提供@代码级别所做的更改？？
请查看相关更改。
您可以使用 (ngModelChange) 事件在组件端获取更新的值。我已经更新了答案，请检查

【解决方案2】：

你可以这样做

 <input type="text"  [ngModel]="name">

阅读更多here

【讨论】：

我不希望它通过使用 {{name}} 来反映。我想要实现的主要目标。