Verstehen Sie die Rolle von APP_INITIALIZER in Angular

Manchmal müssen Sie möglicherweise einige einfache Daten laden oder eine einfache Überprüfung durchführen, wenn die Anwendung initialisiert wird. Die meisten Methoden dienen dazu, dies in der main component-Komponente zu tun, aber es ist schwierig sicherzustellen, dass es in anderen Komponenten effektiv verwendet werden kann. Gibt es eine neuere Möglichkeit, dies zu tun?

Welche Rolle spielt APP_INITIALIZER in Angular?

Die offizielle Dokumentation beschreibt dies: APP_INITIALIZER ist eine Funktion, die aufgerufen wird, wenn die Anwendung initialisiert wird. Dies bedeutet, dass es über die Anbieter der AppModule-Klasse in Form einer Fabrik konfiguriert werden kann und die Anwendung wartet, bis der Ladevorgang abgeschlossen ist, bevor sie mit dem nächsten Schritt fortfährt. Daher ist sie hier nur zum Laden einfacher Daten geeignet.

Beispiel

Neues Projekt erstellen

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

Anbieter konfigurieren

Erstellen Sie zunächst einen Anbieter, der nach dem Parsen der Anfrage ein Promise-Objekt zurückgibt

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

Hier gibt es drei Prozesse:

• Die Methode getJoke() gibt direkt die aktuell gespeicherten Daten von joke zurück, wenn sie von anderen Komponenten oder Modulen aufgerufen wird

• Der Private Property Joke speichert die aktuell angeforderten Daten

• Die Funktion „load()“ wird sofort aufgerufen, wenn die Anwendung initialisiert wird

Anbieterfabrik erstellen

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

JokesProvider und APP_INITIALIZER registrieren

@NgModule({
    declarations:[
        AppComponent
    ],
      imports:[
        BrowserModule,// required
          HttpModule// required
    ],
      providers: [
        JokesProvider,
          {
            provide:APP_INITIALIZER,useFactory: jokesProviderFactory,
              deps:[JoesProvider], multi:true
        }
    ],
      bootstrap:[AppComponent]
})
export class AppModule { }

Anwendung

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

Das obige ist der detaillierte Inhalt vonVerstehen Sie die Rolle von APP_INITIALIZER in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!