在Angular中APP_INITIALIZER的作用是什么

小編給大家分享一下在Angular中APP_INITIALIZER的作用是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在 Angular 中 APP_INITIALIZER 的作用是什么？

在官方文檔是這樣描述的：APP_INITIALIZER 是一個(gè)函數(shù)，在應(yīng)用程序初始化時(shí)被調(diào)用。這就意味著可以通過 AppModule 類的 providers 以 factory 的形式配置它來使用，同時(shí)應(yīng)用程序?qū)?huì)等待它加載完成后進(jìn)行下一步，所以在這此只適合加載簡(jiǎn)單的數(shù)據(jù)。

示例

創(chuàng)建新項(xiàng)目

ng new example --skip-install
npm install # yarn install

配置 Provider

首先創(chuàng)建一個(gè) provider ，它會(huì)在請(qǐng)求解析完成后返回一個(gè) Promise 對(duì)象

@Injectable()
export class JokesProvider {
    private joke:JokeModel = null;

      constructor(private http:Http){
       
    }
   
      public getJoke(): JokeModel {
        return this.joke;
    }
   
      load() {
        return new Promise((resolve,reject) => {
            this.http.get(url)
                      .map(r=>r.json())
                      .subscribe(r=> {
                     this.joke = r['value'];
              resolve(true);
            })
        })
    }
}

這里會(huì)經(jīng)過三個(gè)過程：

getJoke() 方法在其他組件或模塊調(diào)用時(shí)直接返回 joke 當(dāng)前保存的數(shù)據(jù)

私有屬性 joke 會(huì)保存當(dāng)前請(qǐng)求的數(shù)據(jù)

load() 函數(shù)會(huì)在應(yīng)用程序初始時(shí)立即調(diào)用

創(chuàng)建Provider 工廠

export function jokesProviderFactory(provider: JokesProvider){
    return () => provider.load();
}

注冊(cè) JokesProvider 和 APP_INITIALIZER

@NgModule({
    declarations:[
        AppComponent
    ],
      imports:[
        BrowserModule,// required
          HttpModule// required
    ],
      providers: [
        JokesProvider,
          {
            provide:APP_INITIALIZER,useFactory: jokesProviderFactory,

              deps:[JoesProvider], multi:true
        }
    ],
      bootstrap:[AppComponent]
})
export class AppModule { }

應(yīng)用

以上是在Angular中APP_INITIALIZER的作用是什么的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！