理解Angular 中 APP_INITIALIZER 的作用-js教程-PHP中文网

理解Angular 中 APP_INITIALIZER 的作用

一个新手

发布： 2017-10-26 10:53:49

原创

3309人浏览过

有时候，你可能需要在应用程序初始化的时候加载些简单的数据或做简单的验证。大部分的什做法是在 main component 组件中做这个事情，但这很得难保证在其他的组件中有效使用，有没有更新的办法做这个事情呢，请继续往下看。

在 Angular 中 APP_INITIALIZER 的作用是什么？

在官方文档是这样描述的：APP_INITIALIZER 是一个函数，在应用程序初始化时被调用。这就意味着可以通过 AppModule 类的 providers 以 factory 的形式配置它来使用，同时应用程序将会等待它加载完成后进行下一步，所以在这此只适合加载简单的数据。

示例

创建新项目

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

登录后复制

配置 Provider

首先创建一个 provider ，它会在请求解析完成后返回一个 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 当前保存的数据

火山写作
字节跳动推出的中英文AI写作、语法纠错、智能润色工具，是一款集成创作、润色、纠错、改写、翻译等能力的中英文 AI 写作助手。

105

查看详情
私有属性 joke 会保存当前请求的数据
load() 函数会在应用程序初始时立即调用

创建Provider 工厂

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

登录后复制

应用

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

登录后复制