Javascript Ionic框架3：将长文章页面拆分为小页面

我现在有一篇很长的文章，几乎是一本很短的书，我正试图把它分成几页。目前我有一个概述页面，它链接到文章的所有部分，并在页面之间相互链接

我所拥有的： 文章分为10个静态页面：

page1.html，page2.html，页面10.html

我使用

ionic g page\n

创建了10个页面，概述页面

ionic g page overview

将链接到文章的所有部分（有点像一本书）

在

概览页面中.ts

有链接到各个零件的方法

  # run import of all 10 pages

  GoToPage1() {
    this.navCtrl.push(Page1);
  }
  GoToPage2() {
    this.navCtrl.push(Page2);
  }

等等。每个

Page.ts

都有类似的方法链接到下一页和上一页

然而，这种结构似乎效率低下：如果用户浏览了概述，然后阅读第1页、第2页、第3页，并决定单击导航中的后退按钮（而不是直接返回概述，用户将被带到第2页，然后返回第1页，依此类推）

相反，我可以通过定义一个细节页面来解决这个问题（因此我总共只需要创建两个页面：overview和detail），该页面将动态加载这些部分，具体取决于从overview页面传递的参数，并加载相应的HTML页面文件

问题：我真的不知道如何解决这个问题，我们非常感谢任何解决方案

---

另外，我对爱奥尼亚公司非常陌生，我建议您在这种情况下使用幻灯片

<ion-slides>
  <ion-slide>
    <h1>page 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>page 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>page 3</h1>
  </ion-slide>
</ion-slides>

---

有关更多信息，请参见

您想要的是

this.navCtrl.first（）

吗？是否总是要返回到同一个概览页面？如果是这样..使用

setRoot（）

，您可以使用

goToRoot（）

返回到它…这样概览页面（

setRoot

）只需加载一次。我不确定这是否是你想要做的。您可以使用幻灯片而不是页面…@ewizard我不确定，但是如果我在所有10个页面上设置root（概览页面），导航链接中的后退按钮是否会指向概览页面？我尝试添加以下内容this.nav.setRoot（概览页面）；this.nav.poptroot（）；但是1）我不知道在哪里添加它2）如果我在方法GoToPage（）中添加它，导航中的“后退”按钮仍然不会进入主概览页。@sebafereras阅读后，听起来有些东西可以工作；是否可以替换每张幻灯片的导航标题？有你推荐阅读的教程吗？谢谢，我刚完成这个设置，我意识到我似乎无法滚动滑块上的内容。因此，如果我有多个段落，我将无法向下滚动查看底部。你能帮我吗？@Roma是的，滑动和滚动都有问题。那么你真的需要滚动吗？你不能在每张幻灯片上放一段吗？我不能，否则我需要100多页/张幻灯片，这很烦人。这就是为什么我有这个概述。幻灯片有溢出：隐藏，我删除了它，现在可以滚动了。然而，还有一个问题，就是如何从概览页面跳转到第5张幻灯片？我定义了一个函数：goToSlide（n）{this.navCtrl.push（ChapterPage）；this.slides.slideTo（n）；}，它首先转到包含幻灯片的页面，然后我认为应该转到幻灯片编号（n）。理想情况下，我想要的是创建一个详细信息页面，它只需在标签中加载html文件内容。类似于php/python include（）。我已经在html文件中分离了这些页面，例如part1.html、part2.html等等，所以我真的不建议这样做。最好创建一个字符串（段落）数组（book）&然后用book[1]book[5]将段落作为目标&继续。

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

class MyPage {
  @ViewChild(Slides) slides: Slides;

  goToSlide() {
    this.slides.slideTo(2, 500);
  }
}