加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular4--依赖注入

发布时间:2020-12-17 08:28:04 所属栏目:安全 来源:网络整理
导读:【背景】 最近在学习Angular,迫不及待想跟学习到的知识跟大家分享。 【内容】 什么是依赖注入? 依赖注入是“控制反转”(将实例化这个类的控制权交给外部,从而实现类与组件的解耦)的一体两面。控制反转是目的,依赖注入是手段。是不是不太明白,说得直白

【背景】

最近在学习Angular,迫不及待想跟学习到的知识跟大家分享。

【内容】

什么是依赖注入?

依赖注入是“控制反转”(将实例化这个类的控制权交给外部,从而实现类与组件的解耦)的一体两面。控制反转是目的,依赖注入是手段。是不是不太明白,说得直白一点就是在程序运行过程中,如果需要调用另一个对象协助时,无须在代码中创建被调用者,而是依赖于外部的注入。

怎么用?

我们在组件需要某个服务的实例时,不需要手动创建这个实例,只需要在构造函数的参数中指定这个实例的变量,以及这个实例的类,然后angular会根据这个类的名字找到providers属性中指定的同名的provide,再找到它对应的useclass,最终自动创建这个服务的实例。

一、注入器

在组件中的constructor中:

constructor(private productService: ProductService){}
这段代码的意思是,这个组件创建了一个productService,而这个productService是依赖ProductService的,这里的ProductService只是一个token。

二、提供器

通常提供器定义在应用级,及app.module.ts中,供所有组件或服务使用,当然也可以定义在某一个组件中,只供这一个组件使用。

// 两个属性同名
providers: [ProductService]
// 完整写法
providers: [{provide: ProductService,useClass: ProductService}]
// 不同名写法
providers: [{provide: ProductService,useClass: AnotherProductService}]
// 用工厂方式创建这个实例
providers: [{provide: ProductService,useFactory: ()=>{...}}]

这段代码中的provide声明的就是我们刚刚在注入器中提过的token,就是说这两个token是一一对应的,Angular会到提供器中找到和注入器相同的token。代码中的useClass是实例化ProductService类,即帮助我们new了一个类出来,除了useClass外,比较常用的还有useFactory,使用工厂模式实例化一个类,还有useValue。这时候我们在组件中就可以直接使用ProductService类中的方法了。

好处是什么?

在Angular中使用依赖注入,可以帮助我们实现松耦合,实现组件的可重用性。
如果我们有个服务product.service.ts,其中export了一个ProductService类,类中有一个getProducts方法。如果不使用依赖注入,假设我们需要在product组件中使用这个服务时就会new一个ProductService类,但如果这个组件被用到了另一个地方,需要的服务改变了,我们就不得不更改组件中的内容,这样的组件不能说是可复用的。用了依赖注入,这样的情况就不再会发生了。

如果现在product组件用到了另一个地方需要另一个服务,我们命名为OtherProductService,有了依赖注入之后我们就不必更改组件的内容,只需要更改app.module.ts中的提供器。

@NgModule({
    provide: ProductService,useClass: OtherProductService
})

这段代码中,token并没有改变,可是实例化的类变了。

提供器的作用域原则

1.提供器声明在模块时是对所有组件是可见的,所有组件都可以注入。

2.当一个提供器声明在组件时,只对他声明的组件和子组件可见,其他组件不可注入。

3.当声明在模块的提供器和组件的提供器具有相同的token时,声明在组件的提供器会覆盖模块的提供。

4.服务提供器优先声明在模块中,只有服务必须在某个组件可见,对其他组件不可见时才声明在组件中

当组件在构造函数中说明自己想要依赖一个类时,Angular首先会在这个组件自身找看有没有这个提供器,如果没有就去这个组件的父组件中找,如果也没有就去应用级(app.modules.ts)中去找。找到后,就会按照提供器可说明的为组件注入它想要的。


【感受】

基础知识点先一点点总结着,期待破茧成蝶的那一天。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读