Angular における APP_INITIALIZER の役割を理解する

場合によっては、アプリケーションの初期化時に簡単なデータをロードしたり、簡単な検証を実行したりする必要がある場合があります。ほとんどの方法は main component コンポーネントでこれを実行しますが、これを他のコンポーネントで効果的に使用できるかどうかを確認するのは困難です。これを行うための新しい方法はありますか? 読み続けてください。

Angular における APP_INITIALIZER の役割は何ですか?

公式ドキュメントでは次のように説明されています: APP_INITIALIZER はアプリケーションの初期化時に呼び出される関数です。これは、AppModule クラスのプロバイダーを通じてファクトリの形式で構成できることを意味し、アプリケーションはロードが完了するのを待ってから次のステップに進むため、ここでは単純なデータをロードする場合にのみ適しています。

例

新しいプロジェクトを作成します

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

プロバイダーを設定します

まず、リクエストが解析された後に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);
            })
        })
    }
}

ここには3つのプロセスがあります:

• getJoke()メソッド他のコンポーネントまたはモジュールによって呼び出される場合、ジョークの現在保存されているデータが直接返されます。 プライベート プロパティのジョークは、アプリケーションが初期化されるとすぐに呼び出されます。

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

• App

  <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 中国語 Web サイトの他の関連記事を参照してください。