来自外部数据的 Angular 2 Bootstrap 应用程序 [英] Angular 2 Bootstrap application from external data
问题描述
如何仅在获取外部数据后加载 Angular 2 应用程序?
例如，在同一个 html 页面上有外部应用程序，我需要将一些数据传递给我的应用程序服务.想象一下，这是 API URL，就像 'some_host/api/' 并且我的应用程序在获取此信息之前不应初始化.
是否可以从外部应用程序脚本调用我的应用程序的某些方法，例如:
application.initApplication('some data string', some_object);index.html<!doctype html><头><meta charset="utf-8"><title>应用</title><base href="/"><链接><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><身体><脚本>application.initApplication('api/url', some_object);<app-root>正在加载...</app-root></html>这里有一些开始:plnkr:https://plnkr.co/edit/b0XlctB98TLECBVm4wps
您可以在 window 对象上设置 URL:请参阅下面的 index.html.在您的根组件中，添加 *ngif="ready"，其中 ready 是根组件的公共成员，默认设置为 false.
然后在带有 http 服务的服务/根组件中使用该 URL，一旦请求成功，您可以将 ready 设置为 true，您的应用将显示:请参阅 app.ts app 组件 ngOnInit 方法.
代码:
文件:src/app.ts
import { Component, NgModule, VERSION, OnInit } from '@angular/core';从'@angular/platform-browser' 导入 { BrowserModule };从@angular/http"导入 { HttpModule, Http };@成分({选择器:'我的应用'，模板:`<div *ngIf="ready"><h2>你好{{name}}</h2>`，});导出类 App 实现 OnInit {名称:字符串；准备好:布尔值；构造函数(私有http:Http){this.name = `角度！v${VERSION.full}`}ngOnInit(){const self = this;const url = window["myUrl"];this.http.get(url).订阅((res) =>{//用 res 做一些事情控制台日志(res.json())self.ready = true;},(错误) =>控制台错误(错误))，() =>console.log("完成"))}}@NgModule({进口:[浏览器模块，HttpModule]，声明:[应用程序]，引导程序:[应用程序]})导出类 AppModule {}
文件:src/data.json
<代码>{"key1": "val1",key2":val2"}文件:src/index.html
...<script>window['myUrl'] = 'data.json'</script>...</标题> How to load Angular 2 application only after getting external data?
For example, there is external application on the same html page, I need pass some data to my app service. Imagine, this is API URL, like 'some_host/api/' and my application should not be initialized till getting this information.
Is it possible to call some method of the my application from external app script like:
application.initApplication('some data string', some_object);
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>App</title>
<base href="/">
<link>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<script>
application.initApplication('api/url', some_object);
</script>
<app-root
>Loading...</app-root>
</body>
</html>
Here is something to start with: plnkr: https://plnkr.co/edit/b0XlctB98TLECBVm4wps
You can set the URL on the window object: see index.html below.
In your root component, add *ngif="ready" where ready is a public member of your root component that is set to false by default.
Then use that URL in your service/root component with http service, once the request is successful you can set ready to true and your app will show: see app.ts app component ngOnInit method.
Code:
File: src/app.ts
import { Component, NgModule, VERSION, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, Http } from '@angular/http';
@Component({
selector: 'my-app',
template: `
<div *ngIf="ready">
<h2>Hello {{name}}</h2>
</div>
`,
});
export class App implements OnInit {
name: string;
ready: boolean;
constructor(private http: Http) {
this.name = `Angular! v${VERSION.full}`
}
ngOnInit(){
const self = this;
const url = window["myUrl"];
this.http.get(url)
.subscribe(
(res) =>
{
// do something with res
console.log(res.json())
self.ready = true;
},
(err) => console.error(err)),
() => console.log("complete"))
}
}
@NgModule({
imports: [ BrowserModule, HttpModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
File: src/data.json
{
"key1": "val1",
"key2": "val2"
}
File: src/index.html
<header>
...
<script>window['myUrl'] = 'data.json'</script>
...
</header>
这篇关于来自外部数据的 Angular 2 Bootstrap 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
