angular2 系列教程（二）组件

一. 组件

---

1. 创建组件： ng g c login -it -is （完整写法： ng generate component login --inline-template --inline-style） 
   1. 其中“-it -is”代表生成组件的时候将HTML和CSS样式放在同一个文件中
   2. 
2. 引用组件：在根组件的模版“app.component.html”中加入我们的组件引用 <app-login></app-login> 
3. 组件组成：
   1. @Component
      1. selector ：定义引用时候的名称
      2. template：html模版
      3. styles：样式
      4. providers：配置要引用的类的实例，一般是service
   2. export class xxxComponent
4. 编写template中的模版
   1. 事件绑定：
      1. 写法：（触发方式）=“触发函数”
      2. 例子：“ <button (click)="onClick()">Login</button>”（其中“onclick()”写在class中）
   2. 数据绑定：
      1. 分类：
         1. 本类中引用：
            1. 写法：在html标签中添加“#reference”，则reference代表这个标签
            2. 例子：
               1. 注：上面例子，对应class中函数也要写对应参数接收值：“onClick(username){...}”
         2. 双向数据绑定：
            1. 在根模块" app.module.ts"中的imports中添加“FormsModule”
            2. 在xxxComponent中
               1. 在export class xxxComponent中添加成员变量
                  1. 例子：“username : string”
               2. 在模版的html的标签中添加属性：[(ngModule)]=“username”（形象记法：banana-in-box）
               3. 引用方式是：“ this.成员变量”
                  1. 例子：“this.username”
            3. 注意：
               1. 使用双向数据绑定之后，则事件绑定中的函数不需要再有接收参数，参数直接用“this.成员变量”即可，因为已经绑定了
               2. 当双向绑定后想要对表单数据进行验证时，改为 #reference="ngModel"，因为reference需要在模版中引用，如果不是，则不需要加
         3. 单向数据绑定：
            1. []="username" 是将方括号中的值赋值给username这个input控件
            2. ()="username" 是将username的值赋值给圆括号中的变量
   3. 差值表达式：
      1. 写法：{{表达式}}
      2. 应用场景：当表单需要进行验证的时候，在input标签中添加对应属性，然后用差值表达式对属性进行验证（双向绑定+引用）
         1. 例子：
         2. 例子中添加了required，表示不能为必填项，本例如果不为空，差值表达式为true
5. 将服务注入到组件中
   1. 创建服务：“ ng g s auth”
   2. 服务组成：
      1. @Injectable
         1. provideIn：
      2. export class xxxService
   3. 注入方式：
      1. 需要在组建中导入service类
         1. xxxComponent中：
            1. 导入service类：“import { AuthService } from '../core/auth.service';”
            2. 在装饰器中将其实例化：“constructor(private service: AuthService) { }”
      2. 不需要再组件中导入service类
         1. 在根模块" app.module.ts"中配置他的providers（providers作用是配置在模块中全局可用的service或参数）
            1. 
         2. xxxComponent中：
            1. 装饰器中引用全局可用的service“auth”：“constructor(@Inject('auth') private service) { }”
6. 管道
   1. 作用：将数据格式化显示，而不改变源数据
   2. 写法：“{{ 输入数据 | 管道 : 管道参数 }}”
   3. 注意：管道可以向jq一样链式调用：“{{ data | Pipe1 | Pipe2 | Pipe3 | ... }}”
   4. 自定义管道
      1. 步骤：
         1. 创建自定义管道：
            1. 
         2. 使用自定义管道：
            1. 
7. 扩展
   1. 当form表单验证的时候
      1. 如果验证通过，则input的class是“.ng-valid”
      2. 如果验证不通过，则input的class是“.ng-invalid”
   2. 由上可知，可以通过验证通过和不通过对表单设置不一样的样式
      1. 在xxxComponent中编辑styles
      2.