angular的依赖注入
三个重要的概念介绍:
一、注入器:提供一系列的接口用于创建依赖对象的实例。
二、Provider:用来配置注入器,注入器通过它来创建被依赖对象的实例。
三、依赖:指定了被依赖对象的类型,注入器会根据此类型创建对应的对象。
在组件中注入服务
在组件中使用依赖注入需要完成以下三个步骤:
(1)通过import导入被依赖对象的服务
(2)在组件中配置注入器。在组件启动时,angular会读取@Component装饰器里的providers元数据,它是一个数组,配置了该组件需要使用到的所有依赖,Angular的依赖注入框架会根据这个列表来创建对应对象的实例。
(3)在组件构造函数中声明需要注入的依赖。
例如:
import {ContactService} from './shared/contact.service';
import{LoggerService} from './shared/logger.service';
@Component({
selector: 'contact-app',
providers: [ContactService],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class ContactAppComponent{
constructor(logger:LoggerService,contactService: ContactService){}
}
每个组件都可以有自己的注入器,通过依赖注入到该组件中的每个服务都维持单例。如果某个组件不希望复用从根组件注入器获取的服务,则可以在自己的注入器中以新的配置重新注入,这是angular依赖注入的另一个特性,即层级注入。
在服务中注入服务
和在组件中注入类似
只有当一个服务依赖其他服务的时候,才需要用@Injectable()来显示的装饰,Angular官方推荐一个服务不论是否依赖其他的服务,都应该使用@Injectable()来装饰服务。
在模块中注入服务
Angular在启动程序时会启动一个根模块,并加载它所依赖的其他模块,此时会生成一个全局的根注入器,由该注入器创建的依赖注入对象在整个应用程序级别可见,并共享一个实例。同时,根模块会指定一个根组件并启动,由该根组件添加的依赖注入对象在组件树级别可见,在根组件及自组件中共享一个实例。
import {LoggerService} from './shared/logger.service'
@NgModule({
import:[BrowserModule,ContactModule],
declarations:[AppComponent],
providers: [LoggerService],
bootstrap:[Appcomponent]
});
export class AppModule{}
层级注入
注入可以发生在整个组件树的任意一个层级,并在各层级组件的注入器中维持单例,依赖注入可以传递到子孙组件中,子组件可以共享父组件中注入的实例,无需再创建。如果注入了多个实例,这些后代组件也可以共享这些实例。
Provider
用来描述注入器如何初始化标识所对应的依赖服务。
Provider注册方式:
类Provider
例
@NgModule({
import:[BrowserModule,ContactModule],
declarations:[AppComponent],
providers: [LoggerService],
bootstrap:[Appcomponent]
});
值Provider
依赖对象不一定是类,可以是常量、字符串、对象等其他数据类型,以方便用在全局变量、系统相关参数配置等场景中。
例如
@NgModule({
import:[BrowserModule,ContactModule],
declarations:[AppComponent],
providers: [
{provide:'urlSetting',useValue:globalSetting},
{provide:'NAME',useValue:'揭秘Angular'}
],
bootstrap:[Appcomponent]
});
别名Provider
可以在一个Provider中配置多个标识,其对应的对象指向同一个实例,从而实现多个依赖,一个对象实例的作用。
例如:
providers:[
{provide:NewLoggerService,useClass:NewLoggerService},
{provide:OldLoggerService,useClass:NewLoggerService}
]
工厂Provider
有时候依赖对象是不明确且动态变化的,可能需要根据运行环境、执行权限来生成。Provider需要一种动态生成依赖对象的能力,工厂Provider可以解决这个问题。
let contactServiceFactory = {_logger:LoggerService,_userService:UserService}=>{
return new contactService(_logger,_userService.user.isAuthorized);
}
export let contactServiceProvider = {
provide: ContactService,useFactory:contactServiceFactory,deps:[
LoggerService,UserService]};