wordpress CMS主题 微信
Home > JS应用 > angular6.0使用教程:angular数据绑定

angular6.0使用教程:angular数据绑定

高时银博客 JS应用 点击: 87 次 0 1
  • 标签:
  • 我们创建好了home组件后,要想让它的内容在前台页面显示,我们需要在主组件app.component.html文件中引入它。打开app.component.html文件,把里面的原始代码删除,添加上<app-home></app-home>,这时前台页面就会把home组件上的内容显示出来。我们可能会有很多后台的数据要在这个页面显示,这时,angular6.0提供了数据绑定,我们只需要把后台数据在home组件上绑定,就可以在前台显示。

    1、单向数据绑定:

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

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

    hero = 'wanlimm.com';

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

    {{ hero }}

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

    2、双向数据绑定:

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

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

    angular6.0使用教程:angular数据绑定

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

    inputValue="请输入...";

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

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

    这样,在前台页面的这个输入框输入内容,就会修改inputValue的值。这就实现了,inputValue值影响input的值,input值也影响inputValue的值。

     

     


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201806045631.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论