外部データからの角2ブートストラップアプリケーション

外部データを取得した後にのみ角2アプリケーションをロードするには？外部データからの角2ブートストラップアプリケーション

たとえば、同じHTMLページに外部アプリケーションがある場合、アプリサービスにデータを渡す必要があります。たとえば、API URLのようなものです（'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>

出典

2017-04-10 Lemmy

あなたは、データが利用可能なときにブートストラップしたいですか？またはデータが利用できるようになるまでアプリを隠しておきたいのですが、ブートストラップについては気にしませんか？ –

@Ahmed Musallam、 'Loading ...'画面を表示し、最初のユーザーデータが利用可能になった後にアプリケーションを遅延ロードするとよいでしょう。 – user2748659

を開始するためのものです： plnkr：https://plnkr.co/edit/b0XlctB98TLECBVm4wps

ウィンドウオブジェクトにurlを設定できます：を参照してください。ルートコンポーネントのには、*ngif="ready"を追加します。readyは、ルートコンポーネントのパブリックメンバーで、デフォルトではfalseに設定されています。

httpサービスでサービス/ルートコンポーネントのurlを使用すると、リクエストが成功するとtrueに設定され、アプリケーションが表示されます：app.tsappコンポーネント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: false; 
    constructor(private http: Http) { 
    this.name = `Angular! v${VERSION.full}` 
    } 
    ngOnInit(){ 
    var self = this; 
    var 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

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

出典

2017-04-10 14:46:47

外部データからの角2ブートストラップアプリケーション

答えて

関連する問題