当前位置: 首页 > Web前端 > HTML

AngularInjectionTokenAPP_INITIALIZER实现介绍

时间:2023-03-29 12:27:59 HTML

APP_INITIALIZER是InjectionToken的一个实例。它是Angular提供的内置注入令牌。Angular将在应用程序加载时执行此令牌提供的功能。如果函数返回一个承诺,那么Angular将等待直到承诺被解决。这将使它成为在应用程序初始化之前执行一些初始化逻辑的理想场所。Angular注入器使用DI令牌在Angular提供者中定位依赖项。我们使用token在providers中注册依赖:providers:[{provide:token,useClass:SomeService}]上面代码中的token可以是类型,也可以是字符串,也可以是InjectionToken的实例。类型示例:providers:[{provide:productService,useClass:productService}]字符串示例:providers:[{provide:'MESSAGE',useValue:'HelloAngular'}]当使用的类型没有运行时表示时,例如、注入接口、可调用类型(callabletype)等,都会用到InjectionToken——TypeScript代码中的接口,编译成JavaScript后,后者从编程语言层面上不具备接口的表示。这时候可以使用InjectionToken.exportconstHELLO_MESSAGE=newInjectionToken('HelloAngular');提供者:[{提供:HELLO_MESSAGE,useValue:'HelloWorld!'}];如前所述,APP_INITIALIZER在应用程序初始化时运行。Angular暂停应用程序初始化,直到APP_INITIALIZER提供的所有函数都运行完毕。如果这些初始化器中的任何一个返回一个promise,Angular会等待它解析,然后再继续对App进行初始化。这使我们有机会进入初始化过程并运行一些应用程序自定义逻辑。可以加载运行时配置信息。从后台加载重要数据等。看一个例子。新构建文件app-init.service.ts:import{Injectable}from'@angular/core';@Injectable()exportclassAppInitService{constructor(){}Init(){returnnewPromise((resolve,reject)=>{console.log("AppInitService.init()called");////在这里做你的初始化工作setTimeout(()=>{console.log('AppInitServiceFinished');resolve();},6000);});}}app.module.ts的实现:import{BrowserModule}from'@angular/platform-b??rowser';import{NgModule,APP_INITIALIZER}from'@angular/core';import{HttpClientModule}from'@angular/common/http';从'./app-routing.module'导入{AppRoutingModule};从'./app.component'导入{AppComponent};从'./about-us.component'导入{AboutUsComponent};从'./home.component'导入{HomeComponent};从'./contact导入{ContactUsComponent}-us.component';导入{应用程序pInitService}来自'./app-init.service';exportfunctioninitializeApp1(appInitService:AppInitService){return():Promise=>{returnappInitService.Init();}}@NgModule({declarations:[AppComponent,AboutUsComponent,HomeComponent,ContactUsComponent],imports:[HttpClientModule,BrowserModule,AppRoutingModule,],providers:[AppInitService,{provide:APP_INITIALIZER,useFactory:initializeApp1,deps:[AppInitService],多:true}],bootstrap:[AppComponent]})exportclassAppModule{}上面的代码使用InjectionTokenAPP_INITIALIZER提供了函数initializeApp1,它调用了我们服务类的init方法。Angular的依赖注入会将依赖注入到类和组件中,但不会注入到函数中。中间。而我们的initializeApp1是一个需要注入AppInitService作为参数的函数。所以我们通过使用deps标志来做到这一点,并让Angular知道它需要创建一个AppInitService实例并将其注入到initializeApp1函数中。multi:true创建一个多提供商DI令牌。这意味着可以为DI代币提供一组提供者。如果设置了multi:false(默认值)并且一个令牌被多次使用,最后注册的令牌将覆盖所有以前的令牌。也就是说,一个令牌只能有一个提供者。