如何将从后端渲染的参数传递给angular2 bootstrap方法 [英] How to pass parameters rendered from backend to angular2 bootstrap method
问题描述
有没有办法将后端渲染的参数传递给angular2 bootstrap方法？我想使用为所有请求设置http标头BaseRequestOptions ，后端提供值。我的 main.ts 文件如下所示：
Is there a way to pass arguments rendered on the backend to angular2 bootstrap method? I want to set http header for all requests using BaseRequestOptions with value provided from the backend. My main.ts file looks like this:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from "./app.component.ts";
bootstrap(AppComponent);
我发现如何将这些参数传递给根组件（ https://stackoverflow.com/a/35553650/3455681 ），但是当我开火时我需要它 bootstrap 方法......任何想法？
I found how to pass this arguments to root component (https://stackoverflow.com/a/35553650/3455681), but i need it when I'm fireing bootstrap method... Any ideas?
编辑
webpack。 config.js内容：
webpack.config.js content:
module.exports = {
entry: {
app: "./Scripts/app/main.ts"
},
output: {
filename: "./Scripts/build/[name].js"
},
resolve: {
extensions: ["", ".ts", ".js"]
},
module: {
loaders: [
{
test: /\.ts$/,
loader: 'ts-loader'
}
]
}
};
推荐答案
update2
更新 AoT
要使用AoT，需要将工厂关闭移出
To work with AoT the factory closure needs to be moved out
function loadContext(context: ContextService) {
return () => context.load();
}
@NgModule({
...
providers: [ ..., ContextService, { provide: APP_INITIALIZER, useFactory: loadContext, deps: [ContextService], multi: true } ],
另请参阅 https://github.com/angular/angular/issues/11262
更新 RC.6和2.0.0最终示例
update an RC.6 and 2.0.0 final example
function configServiceFactory (config: ConfigService) {
return () => config.load();
}
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule,
routes,
FormsModule,
HttpModule],
providers: [AuthService,
Title,
appRoutingProviders,
ConfigService,
{ provide: APP_INITIALIZER,
useFactory: configServiceFactory
deps: [ConfigService],
multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule { }
如果不需要等待初始化完成，也可以使用`class AppModule {}的构造函数：
If there is no need to wait for the initialization to complete, the constructor of `class AppModule {} can also be used:
class AppModule {
constructor(/*inject required dependencies */) {...}
}
提示（循环依赖）
例如，注入路由器会导致循环依赖。
要解决此问题，请注入 Injector 并获取依赖项
For example injecting the router can cause cyclic dependencies.
To work around, inject the Injector and get the dependency by
this.myDep = injector.get(MyDependency);
而不是直接注入 MyDependency ： / p>
instead of injecting MyDependency directly like:
@Injectable()
export class ConfigService {
private router:Router;
constructor(/*private router:Router*/ injector:Injector) {
setTimeout(() => this.router = injector.get(Router));
}
}
更新
这在RC.5中应该是相同的，但是将提供者添加到提供者：[...] 的根模块而不是 bootstrap（...）
This should work the same in RC.5 but instead add the provider to providers: [...] of the root module instead of bootstrap(...)
（尚未自我测试）。
更新
这里解释了一个完全在Angular中完成的有趣方法 https://github.com/angular/angular/issues/9047#issuecomment-224075188
An interesting approach to do it entirely inside Angular is explained here https://github.com/angular/angular/issues/9047#issuecomment-224075188
您可以使用
APP_INITIALIZER，这将在
应用程序执行时执行如果函数返回
a promise，则初始化并延迟它提供的内容。这意味着应用程序可以初始化而没有太多的b $ b延迟，你也可以使用现有的服务和框架
功能。
You can use
APP_INITIALIZERwhich will execute a function when the app is initialized and delay what it provides if the function returns a promise. This means the app can be initializing without quite so much latency and you can also use the existing services and framework features.
作为一个例子，假设你有一个多租户解决方案，其中
网站信息依赖于它所服务的域名。这可以是
[name] .letterpress.com或在
完整主机名上匹配的自定义域名。我们可以使用 APP_INITIALIZER 隐藏
承诺的事实。
As an example, suppose you have a multi-tenanted solution where the
site info relies on the domain name it's being served from. This can
be [name].letterpress.com or a custom domain which is matched on the
full hostname. We can hide the fact that this is behind a promise by
using APP_INITIALIZER.
在引导程序中：
{provide: APP_INITIALIZER, useFactory: (sites:SitesService) => () => sites.load(), deps:[SitesService, HTTP_PROVIDERS], multi: true}),
sites .service.ts：
sites.service.ts:
@Injectable()
export class SitesService {
public current:Site;
constructor(private http:Http, private config:Config) { }
load():Promise<Site> {
var url:string;
var pos = location.hostname.lastIndexOf(this.config.rootDomain);
var url = (pos === -1)
? this.config.apiEndpoint + '/sites?host=' + location.hostname
: this.config.apiEndpoint + '/sites/' + location.hostname.substr(0, pos);
var promise = this.http.get(url).map(res => res.json()).toPromise();
promise.then(site => this.current = site);
return promise;
}
注意： config 只是一个自定义配置类。对于这个例子， rootDomain 将是
'。letterpress.com'并允许$ b $之类的东西b aptaincodeman.letterpress.com 。
NOTE: config is just a custom config class. rootDomain would be
'.letterpress.com' for this example and would allow things like
aptaincodeman.letterpress.com.
任何组件和其他服务现在都可以拥有网站注入
，并使用 .current 属性，这将是一个具体的
填充对象，无需等待应用程序中的任何承诺。
Any components and other services can now have Site injected into
them and use the .current property which will be a concrete
populated object with no need to wait on any promise within the app.
这种方法似乎减少了启动延迟，否则如果你等待大的Angular捆绑到$ b，
非常明显在引导程序开始之前，$ b加载然后是另一个http请求。
This approach seemed to cut the startup latency which was otherwise quite noticeable if you were waiting for the large Angular bundle to load and then another http request before the bootstrap even began.
原始
您可以使用Angulars依赖注入传递它：
You can pass it using Angulars dependency injection:
var headers = ... // get the headers from the server
bootstrap(AppComponent, [{provide: 'headers', useValue: headers})]);
class SomeComponentOrService {
constructor(@Inject('headers') private headers) {}
}
或直接提供准备好的 BaseRequestOptions
class MyRequestOptions extends BaseRequestOptions {
constructor (private headers) {
super();
}
}
var values = ... // get the headers from the server
var headers = new MyRequestOptions(values);
bootstrap(AppComponent, [{provide: BaseRequestOptions, useValue: headers})]);
这篇关于如何将从后端渲染的参数传递给angular2 bootstrap方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
