Angular6的服务和依赖注入

Angular 把组件和服务区分开,以提升模块性和复用性。服务器

  • 经过把组件中和视图有关的功能与其余类型的处理分离开,你可让组件类更加精简、高效。 理想状况下,组件的工做只管用户体验,而不用顾及其它。 它应该提供用于数据绑定的属性和方法,以便做为视图(由模板渲染)和应用逻辑(一般包含一些模型的概念)的中介者。
  • 组件不该该定义任何诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工做。 而要把这些任务委托给各类服务。经过把各类处理任务定义到可注入的服务类中,你可让它能够被任何组件使用。 经过在不一样的环境中注入同一种服务的不一样提供商,你还可让你的应用更具适应性。

Angular 不会强制遵循这些原则。它只会经过依赖注入让你能更容易地将应用逻辑分解为服务,并让这些服务可用于各个组件中。app

在Angular中使用服务,首先根据须要的功能,写一个服务类(angular中称为provider),而后将该服务类注册到注入器中(应用启动时自动建立),以后就能够在组件类或其余服务中经过Angular的依赖注入系统使用了,Angular会自动将该类实例化,并处理好依赖关系.ide

在Angular中有不少方式能够将服务类注册到注入器中:函数

  • @Injectable 元数据中的providedIn属性
  • @NgModule 元数据中的 providers属性
  • @Component 元数据中的 providers属性

不一样的注册方式,生成的服务也有所不一样.优化

  • 在服务类的 @Injectable 装饰器中:日志

    //service
    @Injectable({
        providedIn: 'root',
    })

    providedIn: 'root' 告诉 Angular在根注入器中注册这个服务,这也是使用CLI生成服务时默认的方式.
    这种方式注册,不须要再@NgModule装饰器中写providers,并且在代码编译打包时,能够执行摇树优化,会移除全部没在应用中使用过的服务。推荐使用此种方式注册服务.code

  • 在模块@NgModule 中的 providers对象

    //service
    @Injectable()
    //module
    @NgModule({
        providers: [
            UserService,
            { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
        ],
    })

    这种方式注册,能够对服务进行一些额外的配置(服务类中也须要写@Injectable()装饰器).编译

  • 在组件 @Component 中的 providerstable

    @Component({
    selector: 'app-heroes',
    providers: [ HeroService ]

    这种方式注册,会注册到每一个组件实例本身的注入器上。(多个组件会有多个注入器)

  • 不提供服务类

    最多见的图纸是class,可是在配置providers: []时,也能够不提供服务类,而是返回对象的工厂函数,或是对象字面量[{ provide: Logger, useClass: Logger }]
    也可使用useValue属性直接交付一个对象实例,[{ provide: Logger, useValue: silentLogger }]

相关文章
相关标签/搜索