Angular的表单组件

建立表单元素

在上一节中，咱们学习了如何建立一个组件login，如今将login改造一下，

在template中添加html表单元素，#usernameRef表示input元素id，若是想传递input的值，使用usernameRef.value

(click)表示要处理的button的click事件，onClick(usernameRef.value,passwordRef.value)为出发的事件，以及传递的参数

 

这里的操做就是在浏览器控制台打印一下用户名和密码

 

保存，运行应用，如图

打开浏览器：http://localhost:4200/

打开浏览器开发者模式，输入：LUCAS，123

 

能够看到，控制台输出了咱们表单填写的值。

 

创建服务

首先在src的app中新建一个core文件夹（src/app/core）

命令行输入：ng g s core/auth

s是service的缩写

 生成文件

为service添加一个方法

能够注意到，参数和返回值都指定了类型，调用这个方法时给的类型不对了，IDE会直接报错，这就是TypeScript带来的好处

 

 依赖注入

你能够在component中import这个服务，而后实例化使用，可是这样很差，是一个紧耦合模式，应用依赖注入（Dependency Injection）能够实现松耦合。

直接使用构造好的实例，实例化的工做交给依赖注入。（可是依旧有import）

 

运行应用：

命令行输入：ng server

浏览器：http://localhost:4200/

文本框：lucas

点击Login

能够看见服务返回了正确的值。

 

能够去掉import吗？

能够的

在app.module.ts中也有providers，能够在这里配置

 

而后login.component.ts就能够去掉头部的import，以及providers

添加修饰符@Inject，他的做用到系统配置中找到名为auth的那个依赖注入到修饰的变量中

 

 

依赖注入不单单是为service服务的，任何类均可以经过这种方式实现解耦，他经过providers提供，经过constructor注入