Angular APP_INITIALIZER 帮助你在构建Angular应用前做些事情

Angular APP_INITIALIZER 帮助你在构建Angular应用前完成初始化操作

是什么？

APP_INITIALIZER是一个注入令牌，在Angular程序启动前调用。可以帮助我们在初始化Angular应用前完成一些必要的数据交互，比如获取用户数据，获取基本配置等操作。

如何使用

// app.module.ts
import {APP_INITIALIZER} from '@angular/core';

const beforeAppInitialzer = () => {
    console.log('初始化函数开始运行');
    return () => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('初始化函数结束，开始构建Angular应用');
                resolve();
                // if reject() 就会终止程序的启动
            }, 3000)
        });
    }
}

@NgModule({
    ...
    providers: [
        ...
        {
            provide: APP_INITIALIZER,
            multi: true,
            useFactory: beforeAppInitialzer
        }
    ]
})

运行代码看看控制台输出…

如何从服务端获取数据？

// app.module.ts

const beforeAppInitialzer = (http: HttpClient) => {
    return () => {
        return new Promise((resolve, reject) => {
            http.get('login').subscribe(res => {
                resolve();
            }, (error) => {
                reject(error);
            }); 
        });
    }
    
}


@NgModule({
    ...
    providers: [
        ...
        {
            provide: APP_INITIALIZER,
            multi: true,
            useFactory: beforeAppInitialzer,
            deps: [HttpClient]
        }
    ]
})

扩展：在初始化前需要完成多个数据请求的动作时，可以配合使用Promise.all方法。