2016-06-30 14 views
1

Ionic2アプリを作成しています。私は外部のtemplateUrlをe.x(http:www.example.com/test-view.html)にロードしたいコンポーネントがあります。外部HTMLページをionic2に読み込む方法

@コンポーネントのtemplateUrl変数にそのhtmlをロードするにはどうすればよいですか?

これまで私がこれまで持っていたことは次のとおりです。

import { Component, DynamicComponentLoader, ViewContainerRef, 
    ViewChild } from '@angular/core'; 
import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { Http, Headers, RequestOptions } from '@angular/http'; 


@Component({ 
    //templateUrl: 'build/pages/hello-ionic/hello-ionic.html' 
    template: `<div [innerHTML]="myVal"></div>`, 
    selector: 'HelloIonicPage' 
}) 
export class HelloIonicPage { 

    myVal: any; 
    viewLink: any; 
    viewHtml: any; 

    constructor(private http: Http) { 


     let headers = new Headers({ 'Content-Type': 'text/html' }); 
     let options = new RequestOptions({ headers: headers }); 

     this.viewHtml = this.http.get('http://example.net//test-view1.html'); 

     this.myVal = this.viewLink 
     console.log(this.myVal); 
    } 
} 

答えて

3

あなたはこのようにそれを行うことができます:あなたが何かの空想を必要とする場合は、DomSanitizationServiceを使用する必要がありますので、HTMLは、消毒されることを

this.http 
    .get('http://example.net//test-view1.html') 
    .map(response => response.text()) 
    .subscribe(html => myVal = html); 

注意を。それを忘れないでくださいセキュリティリスクフラグ(;

+0

)これを行うとXSSエラーが発生します:XMLHttpRequestはhttp://website/test-view1.htmlを読み込めません。 'Access-Control- – ShadowVariable

+0

私はプロキシを設定しなければならないことに気づきました!ありがとうございました。D – ShadowVariable

+0

@ShadowVariable、canあなたはプロキシを設定する方法を私に教えてくれますか? –