温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

APP_INITIALIZER函数的使用方法

发布时间:2020-06-04 19:02:23 来源:亿速云 阅读:1016 作者:Leah 栏目:web开发

这篇文章给大家分享的是APP_INITIALIZER函数的使用方法。小编觉得挺实用的,因此分享给大家学习。如下资料是关于APP_INITIALIZER的内容。

APP_INITIALIZER是在Angular2.x程序启动之前执行的一个函数,可以在这个里面进行自动登录,判断登录token,阻止启动等一系列操作,可以在AppModule类的providers中以factory的形式来配置,factory是一个返回值为promise的函数。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initApp,
            deps: [HttpClient],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

下面我们看initApp的定义,注意一定要是返回值为Promise的函数

简单的一个Projmise例子
export function initApp() {
  return () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('In initApp');
        resolve(); //reject() 就会终止程序的启动
      }, 3000);
    });
  };
}

获取一种信息
export function initApp(http: HttpClient) {
  return () => {
    return http.get('https://api.github.com/users/sagar-ganatra')
      .toPromise()
      .then((resp) => {
        console.log('Response 1 - ', resp);
      });
  };
}

登录后获取一种信息
export function initApp(http: HttpClient) {
  return () => {
    return http.get('login').toPromise()
      .then((resp) => {
                this.user = resp.user;
                return this.http.get('fileInfo').toPromise();
      });
  };
}

更多相关内容:

Angular2.x APP_INITIALIZER 

在 Angular 中 APP_INITIALIZER 的作用是什么

看完上述内容,你们掌握APP_INITIALIZER函数的使用方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI