Angular4中关于component组件如何获取前端页面用户输入的值
来源:互联网 发布:win7无网络访问权限 编辑:程序博客网 时间:2024/06/05 06:00
从今天开始将自己在项目或者学习过程中遇到的问题及解决办法写成博客,积累经验并记录自己的成长。
问题:angular这个框架采用mvc思想,视图与逻辑是分离的,也就是html文件负责页面输出,ts文件负责业务逻辑处理,各司其职,那么问题来了,如何在ts文件中获取到用户在html页面中输入的值?直白点就是用户在输入框中输入“sinclar”,那在ts文件中要怎么样才能获取到,就是这个问题。下面是我的解决办法:
解决:
1.首先要新建一个model文件:
export class Barcode{
public id: number;
public name: string;
public power: string;
}
这个文件的意义就是一个桥梁的作用,连接视图层与逻辑层,在angular1中承担这个角色的就是鼎鼎大名的$scope,不过从angular2开始就放弃这个属性了,这么说有点抽象,就是可以在ts文件中new一个Human对象,然后在前端页面是用ngModel将其绑定,这样就实现了双向绑定。这样说好像还很模糊,等看完整篇文章再自己对比代码就会清晰很多了,不过是自己的讲解,自己理解能力也是有限。
2. 1)在ts文件中引入model:import {Barcode} from '../Model/barcode';
2)创建一个model对象: private model = newBarcode();
3)现在可以随便使用model对象的属性,比如model.power,而且在这里我们操作的model.power会实时更新到模版中,比如model.power = “sinclar”;这是模版使用ngModel绑定数据的输入框就会更新为sinclar,这涉及到angular框架的一个特点,叫双向数据绑定。
3.现在就看前端模版要怎么写了,代码如下:
<form #form="ngForm" (ngSubmit)="onSubmit(form.value)" >
<div class="form-group">
<label for="barcode">SSCC barcode</label>
<input type="text" class="form-control" id="barcode" required
[(ngModel)]=" Barcode.barcode" name="barcode" #barcode="ngModel">
</div>
</form>
这里使用了form表单提交,先不关注这个,有兴趣可以看着这个地址https://www.w3cschool.cn/vntgu/vntgu-u7by25w6.html 可以看到有个[(ngModel)]这就是双向数据绑定的写法,[]实现了数据流从组件到模板,()实现了数据流从模板到组件,两者一结合[()]就实现了双向绑定。 至于#barcode="ngModel"这行代码我不太清楚什么作用,删掉好像没什么影响。
- Angular4中关于component组件如何获取前端页面用户输入的值
- angular4中父组件如何调用子组件的方法
- 获取html页面用户输入的值
- Angular4关于一个组件获取另一个组件中的变量的另外一种方式
- 关于页面上如何获取用户选中的多个checkbox所传递的值
- Angular4关于组件与组件之间的通信
- 如何获取input中输入的值
- Angular4的输入属性
- angular4中关于表单的校验
- Java中获取用户输入值的四种方法
- 自定义服务器组件获取其页面控件里所输入的值的方法
- jsp页面中,如何获取输入的内容,保持在文本框中,不清空
- 如何制作[*.fla]形态的组件(Component)
- Angular4 树组件的使用
- 关于页面中获取用户控件中的控件 事件的方法
- 关于页面中获取用户控件中的控件事件的方法
- 关于struts2中判断表单如果有类名.属性如何在js中获取输入框的值
- 如何获取服务器控件的前端页面ID
- eclipse导入maven项目出现Unsupported IClasspathEntry kind=4错误
- html学习——将html网页转换成pdf形式工具 wkhtmltopdf
- redis的常用命令
- 【Maven】传递性依赖
- 稳定排序和不稳定排序的意义与分析
- Angular4中关于component组件如何获取前端页面用户输入的值
- 文件系统有哪些
- 网站日志分析项目案例
- Leetcode. Add to List 310. Minimum Height Trees
- golang并发学习笔记
- OKHttp使用详解及源码解析
- python入门指南参考--启蒙
- Ubuntu16.04主题美化及软件安装
- 校招编程题目(2) JavaScript:购物车操作(京东)