zoukankan      html  css  js  c++  java
  • Angular Service设计理念及使用

    官方认为组件不应该直接获取或保存数据, 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务。

    而服务就充当着数据访问,逻辑处理的功能。把组件和服务区分开,以提高模块性和复用性。

    1.依赖注入

    • 注入器是主要的机制。Angular 会在启动过程中为你创建全应用级注入器以及所需的其它注入器。你不用自己创建注入器。

    • 该注入器会创建依赖、维护一个容器来管理这些依赖,并尽可能复用它们。

    • 提供商是一个对象,用来告诉注入器应该如何获取或创建依赖。

    2.服务提供商

         我们使用命令ng g s servicename创建一个服务

      在新建的服务中我们可以看到@Injectable()装饰器,它把这个类标记为依赖注入系统的参与者之一。组件中如何使用服务呢,必须将服务依赖注入系统、组件或者模块,才能够使用服务。我们可以用注册提供商根注入器实现

          该服务本身是 CLI 创建的一个类,并且加上了 @Injectable() 装饰器。默认情况下,该装饰器是用 providedIn 属性进行配置的,它会为该服务创建一个提供商。

      在这个例子中,providedIn: 'root' 指定 Angular 应该在根注入器中提供该服务,从而实现根注入器将服务注入,它就在整个应用程序中可用了

    testService.ts

    import { Injectable } from '@angular/core';
    
    @Injectable({
      providedIn: 'root',
    })
    export class TestService {
    }

    也可以指定某个服务只有在特定的模块中提供,类似于一个业务模块中专属于这个模块的服务,只会应用于此模块中,我们就可以这么做。

    import { Injectable } from '@angular/core';
    import { TestModule } from './test.module';
    
    @Injectable({
      providedIn: TestModule,
    })
    export class TestService {
    }

    or

    import { NgModule } from '@angular/core';
    import { TestService } from './test.service';
    
    @NgModule({
      providers: [TestService],
    })
    export class TestModule {
    }

    也可以直接在某个组件中注入服务。

    @Component({
    /* . . . */
      providers: [TestService]
    })

    3.服务的作用域

            为什么一个服务而已,有多种注入的方法有什么区别吗,有。这就在于这个服务作用于哪里,用于限定服务使用的界限。当我们将某个服务根注入意味着在整个应用中都可以使用,注入于某个模块,只能应用于某个模块,注入于组件中,只应用于此组件。我们根据对服务的功能定义,来选择合适的注入方式,以提高性能。

    4.单例服务

    提供单例服务的方法:

    • 把 @Injectable() 的 providedIn 属性声明为 root

    import { Injectable } from '@angular/core';
    
    @Injectable({
      providedIn: 'root',
    })
    export class TestService {
    }
    • 把该服务包含在 AppModule 或某个只会被 AppModule 导入的模块中。

    @NgModule({
      ...
      providers: [TestService],
      ...
    })

    ......

  • 相关阅读:
    获取目录下所有文件名
    毕业论文endnote使用
    CoinChange
    sublime3个人配置
    2015-12-31
    2015-12-09
    #define DEBUG用法
    fiddler介绍
    app测试模块
    android SDK_安装配置_使用
  • 原文地址:https://www.cnblogs.com/magicg/p/15074989.html
Copyright © 2011-2022 走看看