angular6.0教程：angular6.0如何绑定数据

我们创建好了home组件后，要想让它的内容在前台页面显示，我们需要在主组件app.component.html文件中引入它。打开app.component.html文件，把里面的原始代码删除，添加上，这时前台页面就会把home组件上的内容显示出来。我们可能会有很多后台的数据要在这个页面显示，这时，angular6.0提供了数据绑定，我们只需要把后台数据在home组件上绑定，就可以在前台显示。

angular6.0教程

1、单向数据绑定：

所谓单向数据绑定，就是说前台只能获取到后台的数据，而不能影响到后台的数据。

我们在home.component.ts上添加一个属性：

hero = 'wanlimm.com';

然后，我们在前台代码中调用，即在home.component.html文件中调用 这个hero属性：

{{ hero }}

这样，我们就可以在页面中看到“ wanlimm.com”这几个字符。

2、双向数据绑定：

所谓双向数据绑定，就是说前台可以从后台获取数据，也可以影响后台的数据。这里，我们以表单输入来作为示例。我们要实现的是：也就是表单输入框中没输入内容是默认内容，如果有输入，就显示输入的内容。

首先，在app.module.ts文件中导入表单模块：

然后，在home.component.ts文件中添加 一个属性：

inputValue="请输入...";

再在home.component.html文件中添加表单元素：

这样，在前台页面的这个输入框输入内容，就会修改inputValue的值。这就实现了，inputValue值影响input的值，input值也影响inputValue的值。【原文地址：angular6.0使用教程：angular数据绑定】