Javascript Angular 2从外部数据引导应用程序

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

例如，在同一html页面上有外部应用程序，我需要将一些数据传递给我的应用程序服务。想象一下，这是API URL，就像

'some_host/API/”

一样，在获得此信息之前，我的应用程序不应该初始化

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

application.initApplication('some data string', some_object);

index.html
应用程序
initApplication（'api/url'，一些对象）；
加载。。。

以下是一些开始： plnkr：

您可以在窗口对象上设置URL：请参见下面的

index.html

。 在根组件中，添加

*ngif=“ready”

，其中ready是根组件的公共成员，默认设置为false

然后在http服务的服务/根组件中使用该URL，一旦请求成功，您可以将ready设置为true，您的应用程序将显示：请参阅

app.ts

app

component

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/index.html

<header>
    ...
    <script>window['myUrl'] = 'data.json'</script>
    ...
</header>

...
窗口['myUrl']='data.json'
...

以下是一些开始： plnkr：

您可以在窗口对象上设置URL：请参见下面的

index.html

。 在根组件中，添加

*ngif=“ready”

，其中ready是根组件的公共成员，默认设置为false

然后在http服务的服务/根组件中使用该URL，一旦请求成功，您可以将ready设置为true，您的应用程序将显示：请参阅

app.ts

app

component

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/index.html

<header>
    ...
    <script>window['myUrl'] = 'data.json'</script>
    ...
</header>

...
窗口['myUrl']='data.json'
...

当数据可用时，是否要引导？或者你想隐藏你的应用程序直到数据可用并且不关心引导吗？@Ahmed Musallam，最好显示一个“加载…”屏幕，然后在初始用户数据可用后延迟加载应用程序。你想在数据可用时引导吗？或者你想隐藏你的应用程序直到数据可用并且不关心引导吗？@Ahmed Musallam，最好显示一个“加载…”屏幕，然后在初始用户数据可用后延迟加载应用程序。