angular4.x的学习笔记--服务与依赖注入

你的名字 2022-05-28 01:08 188阅读 0赞

## 服务与依赖注入 ##

服务是什么概念？可以简单地认为它是一个功能模块，重要在于它是单例对象，并且可以注入到其他的地方使用。

依赖注入是来自后端的概念，其实就是自动创建一个实例，省去每次需要手动创建的麻烦。

在Angular中定义一个服务很简单，主要在类之前加上`@Injectable`装饰器的功能。这是最常见的依赖注入方式useClass，其他具体参见[这里][Link 1]。

import { Injectable } from '@angular/core';  
    
    @Injectable() 
    export class Service {
        counter: number = 0;
    
        getData(){
            return this.counter++;
        }
    }

然后在模块的`providers`中声明：

import { Service } from './service';
    ...
    
    @NgModule({
        imports: [
            ...
        ],
        declarations: [
            ...
        ],
        providers: [ Service ],  // 注入服务
        bootstrap: [...]
    })
    export class AppModule {
    }

使用的时候需要在构造器中建立关联：

import { Component } from '@angular/core'; 
    import { Service } from './service';
    ...
    
    @Component({
        selector: 'my-app',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent {
        constructor(public service: Service) {
            // this.service被成功注入
            // 相当于 this.service = new Service(); 
            // 然后可以调用服务
            this.service.getData();
        }
    }

由于该服务是在模块中注入，所以该模块中的所有组件使用这个服务时，使用的都是同一个实例。

除了在模块中声明，还可以在组件中声明。假设`AppComponent`下还有组件`HomeComponent`，此时我们在`AppComponent`中注入这个服务：

import { Component } from '@angular/core'; 
    import { Service } from './service';
    ...
    
    @Component({
        selector: 'my-app',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css'],
        providers: [ Service ],  // 注入服务
    })
    export class AppComponent {
        constructor(public service: Service) {
            // this.service被成功注入
            // 相当于 this.service = new Service(); 
            // 然后可以调用服务
            this.service.getData();
        }
    }

如果`HomeComponent`也使用了这个服务，那它使用的将是同一个实例。这个可以从Service中的数据变化来看出。

Angular还有个分层依赖注入的概念，也就是说，你可以为任一组件创建自己独立的服务。就像上面的例子，如果想要`HomeComponent`不和它的父组件同使用一个服务实例的话，只要在该组件中重新注入即可：

...
    @Component({
        selector: 'home',
        templateUrl: './home.component.html',
        styleUrls: ['./home.component.css'],
        providers: [ Service ],  // 重新注入服务
    })
    export class HomeComponent {
        ...
    }

对于前后端的接口，通常会写成服务。下面说下请求后端数据这块应该怎么写。在模块这节中提过，http有专门的`HttpModule`模块处理请求。首先要在模块中导入`HttpModule`，然后引入http服务，调用相应的请求方法即可。

import { Injectable } from '@angular/core';
    import { Http }       from '@angular/http';
    
    import 'rxjs/add/operator/toPromise';
    
    
    @Injectable()
    export class HttpService {
    
      constructor(private http: Http) {}
    
      getFromServer():any {
        return this.http.get(`/data`)
            .toPromise()
            .then(res => res.json())
            .catch();
      }
    }

由于请求返回的对象是个可观察对象，可以转成Promise对象处理。这里需要用到RxJS的`toPromise`操作符，然后用`then`去处理返回成功结果，`catch`处理失败情况。这样就搞定了后端数据的请求了。

RxJS又是另外一个比较高深的话题了，有机会深入学习一下再聊。

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[Link 1]: https://angular.io/guide/dependency-injection
[20191229112121499.png]: /images/20220528/1d419e1bd38f4bf9974927a5fc62dbf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220528/981e341cd59249138f10f483aa4e6ca3.png