Comprendre le rôle de APP_INITIALIZER dans Angular

Parfois, vous devrez peut-être charger des données simples ou effectuer une simple vérification lors de l'initialisation de l'application. La plupart des méthodes permettent de le faire dans le composant main component, mais il est difficile de garantir qu'elles peuvent être utilisées efficacement dans d'autres composants. Existe-t-il une façon plus récente de procéder ainsi ?

Quel est le rôle de APP_INITIALIZER dans Angular ?

La documentation officielle décrit ceci : APP_INITIALIZER est une fonction qui est appelée lors de l'initialisation de l'application. Cela signifie qu'il peut être configuré sous la forme d'une usine via les fournisseurs de la classe AppModule, et l'application attendra la fin du chargement avant de passer à l'étape suivante, elle ne convient donc ici qu'au chargement de données simples.

Exemple

Créer un nouveau projet

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

Configurer le fournisseur

Créez d'abord un fournisseur, qui renverra un objet Promise une fois la demande analysée

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

Il y aura trois processus ici :

• La méthode getJoke() renvoie directement les données actuellement enregistrées de joke lorsqu'elle est appelée par d'autres composants ou modules

• La blague de propriété privée enregistrera les données actuellement demandées

• La fonction load() sera appelée immédiatement lors de l'initialisation de l'application

Créer une usine de fournisseurs

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

Enregistrer JokesProvider et 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 { }

Application

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!