Heim > Artikel > Web-Frontend > 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?
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.
ng new example --skip-install npm install # yarn install
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
export function jokesProviderFactory(provider: JokesProvider){ return () => provider.load(); }
@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:'app',<br/> template:`<h1>Joke of the day: </h1><p>{{jokeModel.joke}} </p>`<br/>})<br/>export class AppComponent implements OnInit{<br/> title = 'app';<br/> jokeModel : JokeModel;<br/> <br/> constructor(jokesProvider: JokesProvider){<br/> this.jokeModel = jokesProvider.getJoke();<br/> }<br/> <br/> ngOnInit(){<br/> console.log('AppComponent: OnInit()');<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!