Question

如何在获取外部数据后加载Angular 2应用程序？

例如，在同一个html页面上有外部应用程序，我需要将一些数据传递给我的应用程序服务。想象一下，这是 API网址，例如'some_host/api/'，我的应用程序在获取此信息之前不应初始化。

是否可以从外部应用程序脚本调用我的应用程序的某些方法，如：

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>

Answer 1

这是开始的事情： plnkr：https://plnkr.co/edit/b0XlctB98TLECBVm4wps

您可以在窗口对象上设置URL：请参阅下面的index.html。在根组件中，添加*ngif="ready"，其中ready是根组件的公共成员，默认情况下设置为false。

然后使用http服务在您的服务/根组件中使用该网址，一旦请求成功，您可以将ready设置为true，并且您的应用将显示：请参阅app.ts app组件{{1}方法。

代码：

档案：ngOnInit

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

src/data.json

档案：{ "key1": "val1", "key2": "val2" }

src/index.html

来自外部数据的Angular 2 Bootstrap应用程序

1 个答案: