如何在 ionic2 中加载外部 html 页面

Question

我正在创建一个 Ionic2 应用程序。我有一个组件，我想将外部 templateUrl 加载到 e.x (http:www.example.com/test-view.html).

如何将 html 加载到 @Component 中的 templateUrl 变量中？

这是我目前的情况。

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);
    }
}

Answer 1

你可以这样做：

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

请注意 html 将被清理，因此如果您需要一些花哨的东西，则必须使用 DomSanitizationService。不要忘记文档中的 安全风险 标志 (;

如何在 ionic2 中加载外部 html 页面

How to load external html page in ionic2

ionic2

angular