我要评论前言
想象一下，您的应用需要一些动态配置信息，这些信息在应用启动之前需要动态获取，并在应用运行中使用。
显然不能直接写道静态配置文件中，但是从客户端发出的请求又是一个异步请求，如何协调这个问题呢？
这里，我想向您演示，如何在 angular 应用初始化期间，使用 app_initializer 注入器来获取应用的动态配置信息。
什么是 app_initializer 注入器
app_initializer 是允许您在 angular 初始化七千处理您自己任务的机制。它既可以用于 appmodule，核心模块，也可以用于您自己的应用加载模块中。典型的场景是应用加载之前做的事情，比如从服务处加载用于设置应用的配置信息。在示例中，我们使用它从服务器的 xml 配置文件中加载应用的设置信息。
创建 appload 模块
尽管不是必要，通过创建 app load module 还是对应用加载有助于隔离。
import { ngmodule, app_initializer } from '@angular/core';
import { httpclientmodule } from "@angular/common/http";
import { apploadservice } from './app-load.service';
export function init_app(apploadservice: apploadservice) {
return () => apploadservice.initializeapp();
}
export function get_settings(apploadservice: apploadservice) {
return () => apploadservice.getsettings();
}
@ngmodule({
imports: [httpclientmodule],
providers: [
apploadservice,
{ provide: app_initializer, usefactory: init_app, deps: [apploadservice], multi: true },
{ provide: app_initializer, usefactory: get_settings, deps: [apploadservice], multi: true }
]
})
export class apploadmodule { }
注意一下几点：
- app_initializer 导入自 @angular/core
- 这里有多个 app_initializer，它们在应用初始化过程中并发执行，直到它们全部完成。
使用 nulti: true 用于多个注入器，如果只有一个，使用 multi: false。 - 工厂函数 init_app 和 get_settings 应当返回一个返回 promise 的函数。
- 该模块必须添加到 appmodule 的导入数组中。
创建 app load service
apploadservice 应当隔离您在应用初始化期间的作为。当然这不是必须的，您可以使用任何需要的服务。
这里实现了两个方法我们在前面代码中使用的方法。在我们的 apploadmodule 中作为依赖注入到提供器数组中。
import { injectable } from '@angular/core';
import { httpclient } from '@angular/common/http';
import 'rxjs/add/operator/topromise';
import { app_settings } from '../settings';
@injectable()
export class apploadservice {
constructor(private httpclient: httpclient) { }
initializeapp(): promise<any> {
return new promise((resolve, reject) => {
console.log(`initializeapp:: inside promise`);
settimeout(() => {
console.log(`initializeapp:: inside settimeout`);
// doing something
resolve();
}, 3000);
});
}
getsettings(): promise<any> {
console.log(`getsettings:: before http.get call`);
const promise = this.httpclient.get('http://private-1ad25-initializeng.apiary-mock.com/settings')
.topromise()
.then(settings => {
console.log(`settings from api: `, settings);
app_settings.connectionstring = settings[0].value;
app_settings.defaultimageurl = settings[1].value;
console.log(`app_settings: `, app_settings);
return settings;
});
return promise;
}
}
注意以下几点：
- initializeapp 用于等待 3 秒，并输出日志来显示两个方法是并行执行的。
- getsettings 调用一个模拟的我使用 apiary 创建的 api 来或者设置。
这里使用这些设置来设置 app_settings 对象的 - 它们都返回 promise
运行应用
运行应用，可以在 console 中查看如下输出
注意：
- 您可以看到两个方法都被调用了。
- 设置首先返回
- initializeapp 最后完成，然后应用启动。
如何从 settings 中获取 api 的地址？
有些人想：“如果没有 settings 来知道 url, 我如何调用 api 呢？”，这是一个问题，您可以通过一个相对 url 来通过 httpclient ，并假设 api 在您的 web 站点上。
参考资料
https://www.intertech.com/blog/angular-4-tutorial-run-code-during-app-initialization/
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论