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

여기에는 세 가지 프로세스가 있습니다.

• getJoke() 메서드 다른 구성요소나 모듈에서 호출하면 현재 저장된 joke 데이터가 직접 반환됩니다. 개인 속성 joke는 현재 요청된 데이터를 저장합니다. load() 함수는 응용 프로그램이 초기화될 때 즉시 호출됩니다.

  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 중국어 웹사이트의 기타 관련 기사를 참조하세요!