Angular가 시작할 때 초기화 코드를 실행하는 방법
Angular가 시작할 때 초기화 코드를 실행하는 방법
먼저 소개APP_INITIALIZERAPP_INITIALIZER는 하나InjectionToken로 Angular에서 기본적으로 제공합니다.이전AngularJs에서 주입될 수 있는 모든 서비스에는 InjectionToken이 표시되었는데 이 세부적인 부분을 보면 Angular에서도 아마 이런 사고방식일 것이다.
NgModule의providers 속성에서 하나의 token과class로 주입할 수 있는 서비스를 표시할 수 있습니다.provider:[{provide:token,useClass:YourServece}];
//or
providers:[ {provide:'MESSAGE', useValue: 'Hello Angular'}];
//or
export const MESSAGE = new InjectionToken('Hello Angular');
providers :[ { provide: HELLO_MESSAGE, useValue: 'Hello World!' }];
// token string type， InjectionToken
그러면 명백한 사고방식은 APP_INITIALIZER 이 토큰을 실행하고자 하는 초기화 논리와 연결하는 것이다.Angular는 연결된 논리를 앱을 초기화할 때 실행한다. 만약에 이 논리가 하나의 Promise로 되돌아온다면 Angular는 Promise가 완성된 후에 그 다음 작업을 진행할 때까지 기다릴 것이다.
리얼 코드 한번 보여주세요.
import { BrowserModule } from '@angular/platform-browser';
import {APP_INITIALIZER, NgModule} from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {UIKitModule} from "./uikit/uikit.module";
import {ServicesModule} from "./services/services.module";
import {init} from 'leancloud-storage';
const initLeancloud=()=>{
return ()=>{init({appId:'xxxxx',appKey:'xxxxxx'});}
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
UIKitModule,
ServicesModule,
AppRoutingModule,
],
providers: [
{provide:APP_INITIALIZER,useFactory:initLeancloud,multi:true},
],
bootstrap: [AppComponent]
})
export class AppModule { }
여기에는 몇 가지 이상한 점이 있다.
provider:[{provide:token,useClass:YourServece}];
//or
providers:[ {provide:'MESSAGE', useValue: 'Hello Angular'}];
//or
export const MESSAGE = new InjectionToken('Hello Angular');
providers :[ { provide: HELLO_MESSAGE, useValue: 'Hello World!' }];
// token string type， InjectionToken
import { BrowserModule } from '@angular/platform-browser';
import {APP_INITIALIZER, NgModule} from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {UIKitModule} from "./uikit/uikit.module";
import {ServicesModule} from "./services/services.module";
import {init} from 'leancloud-storage';
const initLeancloud=()=>{
return ()=>{init({appId:'xxxxx',appKey:'xxxxxx'});}
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
UIKitModule,
ServicesModule,
AppRoutingModule,
],
providers: [
{provide:APP_INITIALIZER,useFactory:initLeancloud,multi:true},
],
bootstrap: [AppComponent]
})
export class AppModule { }
providers: [
{provide:APP_INITIALIZER,useFactory:initLeancloud,multi:true},
{provide:APP_INITIALIZER,useFactory:otherFunction,multi:true},
],
분명히 이것
APP_INITIALIZER은 두 번 사용되었다. 이 두 function은 모두 Angular가 시작될 때 위에서 아래로 실행된다.이 때, multi가false라면, 아래function은 위쪽을 덮어씁니다.주의해야 할 것은useFactory를 사용할 때 지정한 function은 반드시return 값이 있어야 하고,return은 함수를 되돌려야 한다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
