今天完成的事情：

      看了依赖注入：

      Angular 的依赖注入系统能够即时地创建和交付所依赖的服务。它是一种编程模式，可以让类从外部源中获得它的依赖，而不必亲自创建它们。

      举个栗子，在login.component.ts中import引入AuthService，在构造中初始化service，在onClick中调用service。：

import { Component, OnInit } from '@angular/core';

//引入AuthService

import { AuthService } from '../core/auth.service';

@Component({

  selector: 'app-login',

  template: `

    <div>

      <input #usernameRef type="text">

      <input #passwordRef type="password">

      <button (click)="onClick(usernameRef.value, passwordRef.value)">Login</button>

    </div>

  `,

  styles: []

})

export class LoginComponent implements OnInit {

  //声明成员变量，其类型为AuthService

  service: AuthService;

  constructor() {

    this.service = new AuthService();

  }

  ngOnInit() {

  }

  onClick(username, password) {

    //调用service的方法

    console.log('auth result is: ' + this.service.loginWithCredentials(username, password));

  }

}

由于实例化是在组件中进行的，意味着我们如果更改service的构造函数的话，组件也需要更改。

如果我们以后需要开发、测试和生产环境配置不同的AuthService，以这种方式实现会非常不方便。

app.module.ts，这个根模块文件中我们发现也有个providers，根模块中的这个providers是配置在模块中全局可用的service或参数的。

providers: [    {provide: 'auth',  useClass: AuthService}    ]

里面有两个属性，provide和useClass，provide定义了这个服务的名称，有需要注入这个服务的就引用这个名称就好。useClass指明这个名称对应的服务是一个类，本例中就是AuthService了。这样定义好之后，我们就可以在任意组件中注入这个依赖了。下面我们改动一下login.component.ts，去掉头部的import { AuthService } from '../core/auth.service';和组件修饰器中的providers，更改其构造函数为

onstructor(@Inject('auth') private service) { }

加了一个修饰符@Inject('auth')，这个修饰符的意思是请到系统配置中找到名称为auth的那个依赖注入到我修饰的变量中。

明天计划的事情：

       继续学习angular

问题:

      很蒙蔽

收获：

     如上