当前位置： 正文

Angular10教程–3.0依赖注入-简介

Angular 2021-07-03
Angular10教程--3.0依赖注入-简介（DI-Dependency injection）是一种重要的应用设计模式。Angular 有自己的 DI 框架，在设计应用时常会用到它，以提升它们的开发效率和模块化程度。依赖，是当类需要执行其功能时，所需要的或对象。DI 是一种编码模式，其中的类会从外部源中请求获取依赖，而不是自己创建它们。

 题外话-带修饰符的参数

在ts中，一个类的参数如果带上修饰符，那个参数就变成了类的实例属性

class Mobile {
  constructor(readonly name: string = '小米') {}
  logName() {
    console.log(this.name);
  }
}

上面的name有修饰符，那么它就是Mobile类的实例属性，等同于下面写法：

class Mobile {
  readonly name: string;
  constructor() {
    this.name = '小米';
  }
  logName() {
    console.log(this.name);
  }
}

创建服务

为我们将在src/services/下创建一个名叫comment的服务：
ng g s services/comment
先来看看默认生成的文件：
// comment.service.ts
import { Injectable } from '@/core';

@Injectable({
  providedIn: 'root'
})
export class CommentService {
  constructor() { }
}
说明：

  1. 被@Injectable装饰的类，就是一个可以被注入的类，也称为服务（为其它服务或者组件、指令、管道提供服务）;
  2. 元数据的providedIn配置表示是谁提供了这个服务，root表示在根模块中提供。

使用服务

首先，我们先来模拟一点数据：
// src/data/comments.ts
  export default [{
    "postId": 1,
    "id": 1,
    "name": "id labore",
    "email": "Eliseo@gardner.biz",
    "body": "laudantium enim quasi est quidem magnam voluptate ipsam"
  },
  {
    "postId": 1,
    "id": 2,
    "name": "quo vero ",
    "email": "Jayne_Kuhic@sydney.com",
    "body": "est natus enim nihil est dolore omnis"
  }];
在服务中引入并用一个方法返回：
// comment.service.ts
import { Injectable } from '@/core';
import comments from '../data/comments';
@Injectable({
  providedIn: 'root'
})
export class CommentService {
  constructor() { }
  getComments() {
    return comments;
  }
}

创建一个service组件获取服务：

// service.component.ts
...
export class ServiceComponent implements OnInit {
  constructor(private commentService: CommentService) { 
    console.log(this.commentService.getComments()); // 能够获取到模拟的数据
  }
  // ...
}

这就是使用依赖注入的便捷之处，如果没有，我们通过普通类的方法就该是这样了:

// comment.service.ts
import { Injectable } from '@angular/core';
import comments from '../data/comments';
// 删除了@Injectable
export class CommentService {
  constructor() { }
  getComments() {
    return comments;
  }
}

 

...
export class ServiceComponent implements OnInit {
  private comments = [];
  private commentService: CommentService;
  constructor() { 
    // 这里就会使用 new 来实例化
    this.commentServe = new CommentService();
     console.log(this.commentServe.getComments());
  }
  // ...
}

 

提供服务的地方

一个服务的元数据默认配置是在根模块中提供，其实，它还可以由其他地方提供。

providedIn?: Type<any> | 'root' | 'platform' | 'any' | null

在服务本身的@Injectable()中：

// xxx.service.ts
@Injectable({
  providedIn: 'platform'
})

在NgModule的@NgModule()中:

@NgModule({
  ...
  providers: [CommentService]
})

在组件的@Component()装饰器中:

@Component({
  selector: 'app-service',
  templateUrl: './service.component.html',
  providers: [CommentService]
})

服务，对于开发过程中处理一些公用的数据、方法是很有便捷的，就像开篇所说，可以大大提升开发效率和模块化程度。

本文转载自：公众号 岩弈 Angular教程,版权归原作者所有，本博客仅以学习目的的传播渠道，不作版权和内容观点阐述，转载时根据场景需要有所改动。

赏