>  기사  >  웹 프론트엔드  >  Angular에서 APP_INITIALIZER의 역할 이해

Angular에서 APP_INITIALIZER의 역할 이해

一个新手
一个新手원래의
2017-10-26 10:53:493078검색

경우에 따라 애플리케이션 초기화 시 간단한 데이터를 로드하거나 간단한 인증을 해야 할 수도 있습니다. 대부분의 방법은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.