Javascript 爱奥尼亚3&x2014；不带PageName但带表达式/变量/…；的推送页面；？ 介绍

你好！我正在使用Ionic 3并尝试创建一个小型web应用程序。直到现在一切都很顺利，但现在我陷入困境：

这是我在对整个网站进行了几天的研究之后，关于StackOverflow的第一个问题，所以请记住……我真的尽了最大努力来创建一个准确的问题。：）

我在一页上有一个项目列表。单击其中一个按钮时，将打开一个包含详细信息的页面。为了在每个细节页面（实际上只是我创建的一个页面）上实现唯一的内容，我使用{{expressions}}来显示data.json文件中的数据。到目前为止，一切顺利

但现在我想在每个细节页面上都有一个按钮，打开另一个页面。这不应该只是另一个存储和显示数据的页面，而是一个单独的页面，我可以在其中随意放置内容

---

一个明确的例子： 我有5项清单。如果您单击一个项目（单击）=“goToDetailPage（…）”，它将引导您进入DetailPage，该页面通过*ngIf=“details”和一些{{expressions}显示内容。因此，在最后只有一个html文件，其中显示了您单击的项目的单个内容

goToDetailPage(detailsData: any) {
this.navCtrl.push(DetailPage, {expressions});}

• item01>DetailPage
• item02>详细信息页面
• item03>DetailPage
• item04>详细信息页面
• item05>DetailPage

现在，我希望在该详细信息页面上有一个按钮，用于将用户指向一个唯一的页面，即item01>MoreDetailsPage01、item02>MoreDetailsPage02、item03>MoreDetailsPage03、item04>MoreDetailsPage04和item05>MoreDetailsPage05

• item01>DetailPage>button>MoreDetailsPage01
• item02>DetailPage>button>MoreDetailsPage02
• item03>DetailPage>button>MoreDetailsPage03
• item04>DetailPage>button>MoreDetailsPage04
• item05>DetailPage>button>MoreDetailsPage05

---

这就是我被卡住的地方

当然，按钮不是问题…；）对我来说，把一页转到另一页也没有问题。但是：在这种情况下，我没有一个普通的带有按钮的Ionic页面，该页面可以将用户引导到另一个页面（或ModalPage或只是一个ViewPage），而是一个页面（DetailPage），该页面包含的内容仅因.json文件提供的数据而存在。我真的需要一个解决方案，如何使用某种占位符/变量/表达式或任何东西来实现我想要的

非常感谢你们的帮助，如果我的第一个问题能得到回答，我真的很兴奋…：）

谢谢

顺便说一句：我希望标题/我的问题对这种情况是正确的

---

代码 以下是工作原理（这不是我遇到问题的代码。我遇到问题的代码部分甚至不存在，因为我不知道如何处理它。这只是要求的代码-我真的希望这能清楚地说明我的问题）：

---

这是ListPage，其中离子列表/离子项数据来自.json文件。在这里，您可以单击item01、item02、item03、item04、item05（当然更多，但这只是一个示例）以转到odetailpage（这只是此文件的必要代码部分）list.html

<ion-content>
   <ion-list #topicList [hidden]="shownDetails === 0">
   <ion-item-group *ngFor="let group of groups" [hidden]="group.hide">

     <ion-item-divider sticky>
       <ion-label>{{group.topic}}</ion-label>
     </ion-item-divider>

   <ion-item-sliding *ngFor="let detail of group.details" #slidingItem [attr.track]="detail.tracks[0] | lowercase" [hidden]="detail.hide">

    <button ion-item (click)="goToDetailPage(detail)">
      <h3>{{detail.name}}</h3>
      <p>
        {{detail.timeStart}} &mdash;
        {{detail.timeEnd}}:
        {{detail.location}}
      </p>
      <p>{{detail.category}}</p>
    </button>

    <ion-item-options>
      <button ion-button color="secondary" (click)="addFavorite(slidingItem, session)" *ngIf="segment === 'all'">
        Favorite
      </button>
      <button ion-button color="primary" (click)="removeFavorite(slidingItem, session, 'Remove Favorite')" *ngIf="segment === 'favorites'">
        Remove
      </button>
    </ion-item-options>

   </ion-item-sliding>

   </ion-item-group>
   </ion-list>

   <ion-list-header [hidden]="shownDetails > 0">No Sessions Found</ion-list-header>

</ion-content>

<ion-header>
  <ion-navbar>
    <ion-title *ngIf="detail">{{detail.name}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

    <ion-card>
        <ion-card-content>
          <ion-card-title *ngIf="detail">{{detail.name}}</ion-card-title>
      <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
      </p>
          <button ion-button (click)="openModal()">Open Project</button>
        </ion-card-content>
    </ion-card>


    <ion-card>
        <ion-card-content>
           <div *ngIf="detail">
              <h1>{{detail.name}}</h1>
              <p>{{detail.timeStart}} - {{session.timeEnd}}</p>
              <p>{{detail.location}}</p>
              <p>{{detail.description}}</p>
           </div>
        </ion-card-content>
    </ion-card>

</ion-content>

---

这里是唯一的DetailPage，每当有人单击我的ListPage上的某个项目时，它就会打开：detail.html

<ion-content>
   <ion-list #topicList [hidden]="shownDetails === 0">
   <ion-item-group *ngFor="let group of groups" [hidden]="group.hide">

     <ion-item-divider sticky>
       <ion-label>{{group.topic}}</ion-label>
     </ion-item-divider>

   <ion-item-sliding *ngFor="let detail of group.details" #slidingItem [attr.track]="detail.tracks[0] | lowercase" [hidden]="detail.hide">

    <button ion-item (click)="goToDetailPage(detail)">
      <h3>{{detail.name}}</h3>
      <p>
        {{detail.timeStart}} &mdash;
        {{detail.timeEnd}}:
        {{detail.location}}
      </p>
      <p>{{detail.category}}</p>
    </button>

    <ion-item-options>
      <button ion-button color="secondary" (click)="addFavorite(slidingItem, session)" *ngIf="segment === 'all'">
        Favorite
      </button>
      <button ion-button color="primary" (click)="removeFavorite(slidingItem, session, 'Remove Favorite')" *ngIf="segment === 'favorites'">
        Remove
      </button>
    </ion-item-options>

   </ion-item-sliding>

   </ion-item-group>
   </ion-list>

   <ion-list-header [hidden]="shownDetails > 0">No Sessions Found</ion-list-header>

</ion-content>

<ion-header>
  <ion-navbar>
    <ion-title *ngIf="detail">{{detail.name}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

    <ion-card>
        <ion-card-content>
          <ion-card-title *ngIf="detail">{{detail.name}}</ion-card-title>
      <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 
      </p>
          <button ion-button (click)="openModal()">Open Project</button>
        </ion-card-content>
    </ion-card>


    <ion-card>
        <ion-card-content>
           <div *ngIf="detail">
              <h1>{{detail.name}}</h1>
              <p>{{detail.timeStart}} - {{session.timeEnd}}</p>
              <p>{{detail.location}}</p>
              <p>{{detail.description}}</p>
           </div>
        </ion-card-content>
    </ion-card>

</ion-content>

---

要使其完整，.json文件内容：data.json

{

"topics": [{
  "date": "DatePlaceholder",
  "groups": [{
    "topic": "TopicPlaceholder",
    "details": [{
      "name": "NamePlaceholder",
      "location": "LocationPlaceholder",
      "description": "The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.",
      "timeStart": "TimeStartPlaceholder",
      "timeEnd": "TimeEndPlaceholder",
    "categorie": "CategoryPlaceholder",
      "tracks": ["TracksPlaceholder"],
      "id": "1"
    }]
  }, {
    "topic": "TopicPlaceholder",
    "details": [{
      "name": "NamePlaceholder",
      "location": "LocationPlaceholder",
      "description": "The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.",
      "timeStart": "TimeStartPlaceholder",
      "timeEnd": "TimeEndPlaceholder",
    "categorie": "CategoryPlaceholder",
      "tracks": ["TracksPlaceholder"],
      "id": "2"
    }, {
      "name": "NamePlaceholder",
      "location": "LocationPlaceholder",
      "description": "The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.",
      "timeStart": "TimeStartPlaceholder",
      "timeEnd": "TimeEndPlaceholder",
    "categorie": "CategoryPlaceholder",
      "tracks": ["TracksPlaceholder"],
      "id": "3"
    }, {
    }]
  },

    and so on…
}

---

单击按钮后，我想打开一个模式页面（或者可能只是另一个空白页面），您可以在上面的detail.html中看到它。我知道怎么做这样的事情：

.html文件：

<button ion-button (click)="openModal()">Open Modal</button>

export class SomePage {

  constructor(
  public navCtrl: NavController, 
  public modalCtrl : ModalController
) {}

  public openModal(){ var modalPage = this.modalCtrl.create('ModalPage'); modalPage.present(); }

}

但这是一个硬编码的空白ModalPage。如果我将其用于detail.html，它将始终为每个项目打开相同的ModalPage（具有相同的内容）

但是我不想用来自（.json）数据的内容填充ModalPage

我想为item01创建一个ModalPage01.html（模态页面或经典页面，这并不重要，但我在本例中使用模态页面），单击DetailPage（detail.html）上的按钮后打开，为item02创建一个ModalPage02.html，单击DetailPage上的按钮后打开，一个ModalPage03.html，用于单击…后打开的item03，依此类推…；）

ModalPage与我上面提到的更多细节页面是相同的

---

总结 同样：每个ModalPage.html/moretailspage.html的内容都是完全唯一的，需要硬编码

我将创建五个页面（ModalPage01.html、ModalPage02.html、ModalPage03.html、ModalPage04.html、ModalPage05.html），它们是在您单击item01、item02、item03、item04或item05后单击DetailPage上显示的按钮后包含单个内容的更多详细页面

看起来是这样的：

• list.html-item01-（单击）=“goToDetailPage（detail）”>>>detail.html-（单击）=“openModal（）”>>modalpage.html

• list.html-item02-（单击）=“goToDetailPage（detail）”>>>detail.html-（单击）=“openModal（）”>>>modalpage02.html

• list.html-item03-（单击）=“goToDetailPage（detail）”>>>detail.html-（单击）=“openModal（）”>>modalpage03.html

• list.html-item04-（单击）=“goToDetailPage（detail）”>>>detail.html–（单击）=“openModal（）”>>>modalpage04.html

• list.html-item05-（单击）=“goToDetailPage（detail）”>>>detail.html-（单击）=“openModal（）”>>modalpage05.html

大写：

<button ion-button (click)="openModal()">Open Modal</button>

export class SomePage {

  constructor(
  public navCtrl: NavController, 
  public modalCtrl : ModalController
) {}

  public openModal(){ var modalPage = this.modalCtrl.create('ModalPage'); modalPage.present(); }

}

• 在list.html上单击item01打开detail.html，单击按钮打开modalpage01.html

• 在list.html上单击item02打开detail.html，单击按钮打开modalpage02.html

• 等等…
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);

  "devDependencies": {
      "@ionic/app-scripts": "3.1.8",
      "ionic": "3.20.0",
      "typescript": "2.3.4"
    }