Angular6的服务和依赖注入

sugarmo 发布于2019-08-22 18:18 / 2835人阅读

摘要：把组件和服务区分开，以提高模块性和复用性。而要把这些任务委托给各种服务。它只会通过依赖注入让你能更容易地将应用逻辑分解为服务，并让这些服务可用于各个组件中。

Angular 把组件和服务区分开，以提高模块性和复用性。

通过把组件中和视图有关的功能与其他类型的处理分离开，你可以让组件类更加精简、高效。理想情况下，组件的工作只管用户体验，而不用顾及其它。它应该提供用于数据绑定的属性和方法，以便作为视图（由模板渲染）和应用逻辑（通常包含一些模型的概念）的中介者。

组件不应该定义任何诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作。而要把这些任务委托给各种服务。通过把各种处理任务定义到可注入的服务类中，你可以让它可以被任何组件使用。通过在不同的环境中注入同一种服务的不同提供商，你还可以让你的应用更具适应性。

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

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

在Angular中有很多方式可以将服务类注册到注入器中:

@Injectable 元数据中的providedIn属性

@NgModule 元数据中的 providers属性

@Component 元数据中的 providers属性

不同的注册方式,生成的服务也有所不同.

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

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

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

在模块@NgModule 中的 providers

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

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

在组件 @Component 中的 providers

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

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

不提供服务类

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

GPU云服务器云服务器依赖注入依赖注入方式 js依赖注入构造函数依赖注入

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95712.html

【CuteJavaScript】Angular6入门项目（3.编写服务和引入RxJS）

摘要：发布通过回调方法向发布事件。观察者一个回调函数的集合，它知道如何去监听由提供的值。本文目录一、项目起步二、编写路由组件三、编写页面组件 1.编写单一组件 2.模拟数据 3.编写主从组件四、编写服务 1.为什么需要服务 2.编写服务五、引入RxJS 1.关于RxJS 2.引入RxJS 3.改造数据获取方式六、改造组件 1.添...

RebeccaZhong 2019-08-23 15:25 评论0 收藏0
Angular6错误 Service: No provider for Renderer2

摘要：解决办法很简单，既然无法注入就不注入。可以利用工厂类代替直接注入的方式。示例代码如下利用对象去操作元素即可这个错误一般是在构造函数中注入 Renderer2 引起的。解决办法很简单，既然无法注入Renderer2就不注入。可以利用工厂类RendererFactory2 代替直接注入Renderer2的方式。示例代码如下： import { Renderer2, RendererF...

rickchen 2019-08-23 15:31 评论0 收藏0
初探Angular6.x---主从组件

摘要：在上一篇博文用户列表与详情展示中我们用实现了用户列表的展示并通过语法实现了列表单击时将单击的对象传到后台的功能最后为了防止初次加载对象为空导致的错误我们又使用了语法来对要展示的详情对象进行判空操作但随着后续模块的增多以及业务的交叉我们　　　在上一篇博文《Angular6.x---用户列表与详情展示》中,我们用ngFor=let object of list实现了用户列表的展示,并通过...

FingerLiu 2019-08-19 11:06 评论0 收藏0
【CuteJavaScript】Angular6入门项目（4.改造组件和添加HTTP服务）

摘要：然后我们在父组件上添加事件监听，并传入本地的在对应的中添加方法再来，我们在子组件上多导入和，并添加修饰器和调用这样就实现了我们父子组件之间的事件传递啦，现在我们的页面还是正常运行，并且删除一条数据后，页面数据会更新。本文目录一、项目起步二、编写路由组件三、编写页面组件 1.编写单一组件 2.模拟数据 3.编写主从组件四、编写服务 1.为什么需要服务 ...

BDEEFE 2019-08-23 15:25 评论0 收藏0
【CuteJavaScript】Angular6入门项目（1.构建项目和创建路由）

摘要：启动服务，并打开新窗口可简写创建新组件可简写创建新服务创建路由模块其他另外还有很多的命令提供，详细可以查阅官方文档命令。引入路由模块导出路由模块的指令这里需要添加一个数组，并传入，导出让路由器的相关指令可以在中的组件中使用。本文目录一、项目起步二、编写路由组件三、编写页面组件 1.编写单一组件 2.模拟数据 3.编写主从组件四、编写服务 1.为什么需要服务 2....

bergwhite 2019-08-23 15:25 评论0 收藏0