如何在 ionic 2 中包含 html 页面？

Posted 2023-03-13

【中文标题】如何在 ionic 2 中包含 html 页面？

【英文标题】：How to include html page in ionic 2?

【发布时间】：2018-01-24 10:41:48

【问题描述】：

我想包含 html 页面作为 ion-content 的内容。我需要对单个页面有多个视图。

home.ts:

goto(item)
    console.log(item);
  

home.html:

<ion-list>
    <ion-item (click)="goto('android')">Android</ion-item>
    <ion-item (click)="goto('java')">Java</ion-item>
    <ion-item (click)="goto('ionic')">Ionic</ion-item>
</ion-list>

在这里，我为每个项目（如 android.html、ionic.html）提供了不同的 .html 文件。 选择项目后，我需要在 ion-view 中显示 HTML 内容。

【问题讨论】：

你开始了一个离子项目吗？如果您已经开始，生成的 HTML 页面应该在 src 文件夹中

你能分享一些你页面的code吗？

我已经添加了我的 .ts 和 html 文件@Sampath

【参考方案1】：

既然你有所有的页面那么你只需要这样做：你可以使用navCtrl.push()，如下所示。

home.ts

goto(item:string)

    switch(item) 
    case "android":
        this.navCtrl.push(AndroidPage);
        break;
    case "java":
         this.navCtrl.push(JavaPage);
        break;
    case "ionic":
         this.navCtrl.push(IonicPage);
        break;
    default:
    
 

你可以学习basics of Ionic here。

【讨论】：

谢谢，@Sampath。这里Android、Java是首页项。一旦选择了项目（Android 或 Java）。需要去 detailsPage this.navCtrl.push(DetailsPage);在详细信息页面中，我需要将 .html 文件（Android.html 或 Java.html）中的内容显示为 details.html

的一部分

你能显示你的Android.html文件的代码吗？