Angular 学习笔记 (五） - 服务Service和依赖注入

参考官方文档：https://angular.cn/tutorial/toh-pt4

 

一.服务

组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。

Service的作用便可以减少数据在不同模块之间的耦合，简化代码。

创建Service指令：

ng generate service hero

Service的结构:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor() { }

}

 这里 providedIn: 'root' 的可以将Service声名为App的根目录，适用于作为一个单例服务

 

二.依赖注入

服务导入了 Angular 的 Injectable 符号，并且给这个服务类添加了 @Injectable() 装饰器。 它把这个类标记为依赖注入系统的参与者之一。


@Injectable() 装饰器会接受该服务的元数据对象，就像 @Component() 对组件类的作用一样。

你必须先注册一个服务提供者，来让 Service 在依赖注入系统中可用，Angular 才能把它注入到 Component 中。所谓服务提供者就是某种可用来创建或交付一个服务的东西；在这里，它通过实例化 HeroService 类，来提供该服务。

为了确保 HeroService 可以提供该服务，就要使用注入器来注册它。注入器是一个对象，负责当应用要求获取它的实例时选择和注入该提供者。

一个依赖注入的示例：

Recipe数据模型：

import { Ingredient } from '../shared/ingredient.model';

export class Recipe {
  public name: string;
  public description: string;
  public imagePath: string;
  public ingredients: Ingredient[];

  constructor(name: string, desc: string, imagePath: string, ingredients: Ingredient[]) {
    this.name = name;
    this.description = desc;
    this.imagePath = imagePath;
    this.ingredients = ingredients;
  }
}

服务：

import { EventEmitter, Injectable } from '@angular/core';

import { Recipe } from './recipe.model';
import { Ingredient } from '../shared/ingredient.model';
import { ShoppingListService } from '../shopping-list/shopping-list.service';

@Injectable()
export class RecipeService {
  recipeSelected = new EventEmitter<Recipe>();

  private recipes: Recipe[] = [
    new Recipe(
      'Tasty Schnitzel',
      'A super-tasty Schnitzel - just awesome!',
      'https://upload.wikimedia.org/wikipedia/commons/7/72/Schnitzel.JPG',
      [
        new Ingredient('Meat', 1),
        new Ingredient('French Fries', 20)
      ]),
    new Recipe('Big Fat Burger',
      'What else you need to say?',
      'https://upload.wikimedia.org/wikipedia/commons/b/be/Burger_King_Angus_Bacon_%26_Cheese_Steak_Burger.jpg',
      [
        new Ingredient('Buns', 2),
        new Ingredient('Meat', 1)
      ])
  ];

  constructor(private slService: ShoppingListService) {}

  getRecipes() {
    return this.recipes.slice();
  }

  addIngredientsToShoppingList(ingredients: Ingredient[]) {
    this.slService.addIngredients(ingredients);
  }
}

这里 ShoppingListService 是另一个服务，服务中可以注入另一个服务 

 服务注入Component：

recipes.component.ts:

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

import { Recipe } from './recipe.model';
import { RecipeService } from './recipe.service';

@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.component.html',
  styleUrls: ['./recipes.component.css'],
  providers: [RecipeService]
})
export class RecipesComponent implements OnInit {
  selectedRecipe: Recipe;

  constructor(private recipeService: RecipeService) { }

  ngOnInit() {
    this.recipeService.recipeSelected
      .subscribe(
        (recipe: Recipe) => {
          this.selectedRecipe = recipe;
        }
      );
  }
}

 

三. 依赖注入的层级

Root注入器并不是Angular应用中唯一的注入器。Modules 和 Components也有自己的注入器。Angular应用的注入器遵循一个层级制度。

每当Angular组件在其构造函数中定义了Token时，注入器就会在已注册提供者池中搜索与该Token匹配的类型。如果没有匹配，它将在父组件的提供者上委托搜索，并不断向注册器树上级找寻，直到root注入器。如果提供者查找结束时没有匹配，它将返回

如果没有找到匹配项，Angular就会抛出异常。

注入器树：

 

 当组件寻求依赖时：

1st pass: 组件会依次来搜寻父组件，如果找到依赖，则停止寻找并请求改实例，若没有找到，进入2nd pass

2nd pass: 组件依次搜寻其父Module直到root，如果找到依赖，则停止寻找并请求改实例，如果没有找到，则抛出error