angular学习（三）

Angular 中的依赖注入

1.1依赖

当一个类需要另一个类协作来完成工作的时候就产生了依赖。比如我们在AccountController这个控制器需要完成和用户相关的注册、登录 等事情。其中的登录我们由EF结合Idnetity来完成，所以我们封装了一个EFLoginService。这里AccountController就有一个ILoginService的依赖。简单来说就是一个类需要别的类的帮助，就是有了依赖，别的类将此类需要的东西给他就是注入，步骤：

1.首先新建一个Service层 

ng g service heroes/hero

 

import { Component }   from '@angular/core';
import { HEROES }      from './mock-heroes';

@Component({
  selector: 'app-hero-list',
  template: `
    <div *ngFor="let hero of heroes">
      {{hero.id}} - {{hero.name}}
    </div>
  `
})
export class HeroListComponent {
  heroes = HEROES;
}

import { Component }   from '@angular/core';
import { Hero }        from './hero';
import { HeroService } from './hero.service';

@Component({
  selector: 'app-hero-list',
  template: `
    <div *ngFor="let hero of heroes">
      {{hero.id}} - {{hero.name}}
    </div>
  `
})
export class HeroListComponent {
  heroes: Hero[];

  constructor(heroService: HeroService) {
    this.heroes = heroService.getHeroes();
  }
}

以上便实现了将HeroService类注入到了HeroListComponent类中。

解析修饰符:

angular的修饰符和Java的修饰符很像，可以使用 @Optional()，@Self()，@SkipSelf() 和 @Host() 来修饰 Angular 的解析行为。从 @angular/core 导入它们，并在注入服务时在组件类构造函数中使用它们。

修饰符的类型

解析修饰符分为三类：

1. 如果 Angular 找不到你要的东西该怎么办，用 @Optional()

2. 从哪里开始寻找，用 @SkipSelf()

3. 到哪里停止寻找，用 @Host() 和 @Self()

@Optional

@Optional() 允许 Angular 将你注入的服务视为可选服务。这样，如果无法在运行时解析它，Angular 只会将服务解析为 null，而不会抛出错误。在下面的示例中，服务 OptionalService 没有在 @NgModule() 或组件类中提供，所以它没有在应用中的任何地方。

export class OptionalComponent {
  constructor(@Optional() public optional?: OptionalService) {}
}

@Self()

@Self() 的一个好例子是要注入某个服务，但只有当该服务在当前宿主元素上可用时才行。为了避免这种情况下出错，请将 @Self() 与 @Optional() 结合使用。

@Component({
  selector: 'app-self-no-data',
  templateUrl: './self-no-data.component.html',
  styleUrls: ['./self-no-data.component.css']
})
export class SelfNoDataComponent {
  constructor(@Self() @Optional() public leaf?: LeafService) { }
}

其实就是在当前宿主元素上检索父元素，找到即停止搜索。

@SkipSelf()

@SkipSelf() 与 @Self() 相反。使用 @SkipSelf()，Angular 在父 ElementInjector 中而不是当前 ElementInjector 中开始搜索服务。因此，如果父 ElementInjector 对 emoji 使用了值 🌿（蕨类），但组件的 providers 数组中有 🍁（枫叶），则 Angular 将忽略 🍁（枫叶），而使用 🌿（蕨类）。

比较常用的就是这三个标签了。