理解Angular 中 APP_INITIALIZER 的作用

有時候，你可能需要在應用程式初始化的時候載入一些簡單的資料或做簡單的驗證。大部分的什做法是在main component 元件中做這個事情，但這很難保證在其他的元件中有效使用，有沒有更新的辦法做這個事情呢，請繼續往下看。

在 Angular 中 APP_INITIALIZER 的作用是什麼？

在官方文件是這樣描述的：APP_INITIALIZER 是一個函數，在應用程式初始化時被呼叫。這意味著可以透過 AppModule 類別的 providers 以 factory 的形式配置它來使用，同時應用程式將會等待它載入完成後進行下一步，所以在這此只適合載入簡單的資料。

範例

建立新專案

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

設定Provider

先建立一個provider ，它會在請求解析完成後傳回一個Promise 物件

@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);
            })
        })
    }
}

這裡會經過三個過程：

• getJoke() 方法在其他元件或模組呼叫時直接傳回joke 目前儲存的資料

• 私有屬性joke 會儲存目前請求的資料

• load() 函數會在應用程式初始時立即呼叫

建立Provider工廠

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

註冊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 { }

應用程式

<p>@Component({<br/>    selector:&#39;app&#39;,<br/>    template:`<h1>Joke of the day: </h1><p>{{jokeModel.joke}} </p>`<br/>})<br/>export class AppComponent implements OnInit{<br/>  title = &#39;app&#39;;<br/>  jokeModel : JokeModel;<br/>  <br/>  constructor(jokesProvider: JokesProvider){<br/>      this.jokeModel = jokesProvider.getJoke();<br/>  }<br/>  <br/>  ngOnInit(){<br/>      console.log(&#39;AppComponent: OnInit()&#39;);<br/>  }<br/>}  <br/></p>

########################################################

以上是理解Angular 中 APP_INITIALIZER 的作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！