Question

Введение

Привет!Я работаю с Ionic 3 и пытаюсь создать небольшое веб-приложение.До сих пор все работало нормально, но теперь я в грязи:

Это мой самый первый вопрос о StackOverflow после изучения всей сети в течение нескольких дней, поэтому, пожалуйста, имейте это в виду… ядействительно старался изо всех сил, чтобы создать точный вопрос.:)

У меня есть список элементов на странице.При нажатии на них открывается страница с подробностями.Чтобы получить уникальный контент на каждой странице сведений (которая фактически является только одной страницей, которую я создал), я использую {{выражения}} для отображения данных из файла data.json.Пока все хорошо.

Но теперь я хочу иметь кнопку на каждой странице сведений, которая открывает другую страницу.Это должна быть не просто еще одна страница, на которой хранятся и отображаются данные, а отдельная страница, на которой я мог бы размещать контент по своему усмотрению.

Пример, чтобы прояснить ситуацию: IУ меня есть 5 пунктов списка.Если вы щелкнете по элементу (click) = "goToDetailPage (...)", он направит вас к DetailPage, который показывает контент через * ngIf = "details" и некоторые {{выражения}}.Таким образом, в конце всего один единственный html-файл, который показывает отдельное содержимое для элемента, который вы щелкнули.

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

item01> DetailPage
item02> DetailPage
item03> DetailPage
item04> DetailPage
item05> DetailPage

Теперь мне нужна кнопка на этом DetailPage, которая направляет пользователя на уникальную страницу, означает для item01>MoreDetailsPage01, для item02> MoreDetailsPage02, для item03> MoreDetailsPage03, для item04> MoreDetailsPage04 и item05> MoreDetailsPage05

item01> DetailPage> кнопка> MoreDetailsPage01
item03> DetailPage> кнопка> MoreDetailsPage03
item04> DetailPage> кнопка> MoreDetailsPage04
item05> DetailPage> кнопка> MoreDetailsPage05

И вот где я застреваю!

Конечно, кнопка не проблема ...;) Там тоже нет проблемдля меня, чтобы направить одну страницу на другую.Но: в этом случае у меня не обычная ионная страница с кнопкой, которая направляет пользователя на другую страницу (или ModalPage, или просто ViewPage), а одна страница (DetailPage), содержимое которой существует только из-зак данным, предоставленным из файла .json.Мне действительно нужно решение, как использовать какую-то метку-заполнитель / переменную / выражение или что-то еще, чтобы добиться того, что я ищу.

Очень ценю вашу помощь, ребята, и я очень рад, если мой первыйвопрос будет получен ответ…:)

Спасибо!

Кстати: я надеюсь, что заголовок / мой вопрос правильный для этого случая.

Код

Вот как все работает (это не тот код, с которым у меня проблемы. Часть кода, которая у меня есть)проблем даже не существует, потому что я понятия не имею, как их решить. Это просто запрошенный код - и я очень надеюсь, что мои проблемы прояснятся):

ЭтоListPage, где данные ion-list / ion-item поступают из файла .json.Это место, где вы нажимаете item01, item02, item03, item04, item05 (конечно, гораздо больше, но это только пример) для перехода к goToDetailPage (это просто необходимая часть кода этого файла). 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>

Это файл .ts ListPage (это просто необходимая часть кода этого файла).Здесь вы найдете функцию goToDetailPage, которая выдвигает DetailPage с данными, предоставленными в формате .json: list.ts

import { Component, ViewChild } from '@angular/core';
import { AlertController, App, FabContainer, ItemSliding, List, ModalController, NavController, ToastController, LoadingController, Refresher } from 'ionic-angular';
import { DetaData } from '../../providers/deta-data';
import { UserData } from '../../providers/user-data';
import { DetailPage } from '../detail/detail';
import { TopicFilterPage } from '../topic-filter/topic-filter';

@Component({
 selector: 'page-list',
 templateUrl: 'list.html',
})

export class ListPage {
@ViewChild('topicList', { read: List }) topicList: List;

dayIndex = 0;
queryText = '';
segment = 'all';
excludeTracks: any = [];
shownDetails: any = [];
groups: any = [];
detailDate: string;

constructor(
  public alertCtrl: AlertController,
  public app: App,
  public loadingCtrl: LoadingController,
  public modalCtrl: ModalController,
  public navCtrl: NavController,
  public toastCtrl: ToastController,
  public detData: DetaData,
  public user: UserData,
) {}

ionViewDidLoad() {
  this.app.setTitle('Topics');
  this.updateTopics();
}

updateTopic() {
  this.topicList && this.topicList.closeSlidingItems();

this.detData.getTimeline(this.dayIndex, this.queryText, this.excludeTracks, this.segment).subscribe((data: any) => {
  this.shownDetails = data.shownDetails;
  this.groups = data.groups;
});

}

presentFilter() {
  let modal = this.modalCtrl.create(TopicFilterPage, this.excludeTracks);
  modal.present();

  modal.onWillDismiss((data: any[]) => {
    if (data) {
      this.excludeTracks = data;
      this.updateTopic();
    }
  });

}

goToDetailPage(detailData: any) {
  this.navCtrl.push(DetailPage, { detailId: detailData.id, name: 
detailData.name });
}

addFavorite(slidingItem: ItemSliding, detailData: any) {

  if (this.user.hasFavorite(detailData.name)) {
    this.removeFavorite(slidingItem, detailData, 'Favorite already added');
  } else {
    this.user.addFavorite(detailData.name);

    let alert = this.alertCtrl.create({
      title: 'Favorite Added',
      buttons: [{
        text: 'OK',
        handler: () => {
        slidingItem.close();
        }
      }]
    });
    alert.present();
  }

}

removeFavorite(slidingItem: ItemSliding, detailData: any, title: string) {
let alert = this.alertCtrl.create({
  title: title,
  message: 'Would you like to remove this session from your favorites?',
  buttons: [
    {
      text: 'Cancel',
      handler: () => {
        slidingItem.close();
      }
    },
    {
      text: 'Remove',
      handler: () => {
      this.user.removeFavorite(detailData.name);
        this.updateSchedule();
        slidingItem.close();
      }
    }
  ]
 });
    alert.present();
 }
}

А вот и единственный DetailPage, которыйоткрывается всякий раз, когда кто-то щелкает элемент на моей странице ListPage: detail.html

<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>

И вот последнийart - файл detail.ts, который загружает все данные для DetailPage: detail.ts

import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';

import { DetaData } from '../../providers/deta-data';

@Component({
  selector: 'page-detail',
  templateUrl: 'detail.html'
})

export class DetailPage {
  detail: any;

constructor(
  public dataProvider: DetaData,
  public navParams: NavParams,
) {}

ionViewWillEnter() {
  this.dataProvider.load().subscribe((data: any) => {
    if (
      data &&
      data.topic &&
      data.topic[0] &&
      data.topic[0].groups
    ) {
      for (const group of data.topic[0].groups) {
        if (group && group.details) {
          for (const detail of group.details) {
            if (detail && detail.id === this.navParams.data.detailId) {
              this.detail = detail;
              break;
            }
          }
        }
      }
    }
  });
}
}

Для завершения - содержимое файла .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>

.ts файл:

export class SomePage {

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

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

}

Но это жестко запрограммированный бланк ModalPage.И если бы я использовал это для detail.html, он всегда открывал бы один и тот же ModalPage (с одинаковым содержимым) для каждого элемента.

Но я не хочу заполнять ModalPage содержимым, полученным из (.json) данных.

Я хочу создать один ModalPage01.html (модальная страница или классическая страница, который на самом деле не имеет значения, но я использую модальную страницу для этого примера) для item01, который открывается после нажатия кнопки на DetailPage (detail.html), один ModalPage02.html для item02, который открывается после нажатия на эту кнопку DetailPage, один ModalPage03.html для item03, который открывается после нажатия на… и т. д.;)

ModalPage равен (то же самое) к странице MoreDetails, о которой я говорил выше.

Сводка

Опять же: содержимое каждого ModalPage.html / MoreDetailsPage.html является полностью уникальным и должно быть жестко закодировано.

Я создам пять страниц (ModalPage01.html, ModalPage02.html, ModalPage03.html, ModalPage04.html, ModalPage05.html), которые являются страницами MoreDetailsPage, которые содержат отдельный контент после нажатия кнопки, которая появляется наDetailPage после нажатия на item01, item02, item03, item04 или item05.

будет выглядеть следующим образом:

list.html - item01 - (click) = "goToDetailPage (detail)" >>> detail.html - (click) = "openModal ()" >>> modalpage01.html
list.html - item02 - (click) = "goToDetailPage (detail)" >>> detail.html - (click) = "openModal ()" >>> modalpage02.html
list.html - item03 - (click) = "goToDetailPage (detail)" >>> detail.html - (click) = "openModal ()" >>> modalpage03.html
list.html - item04 - (click) = "goToDetailPage (detail)" >>> detail.html - (click) = "openModal ()" >>> modalpage04.html
list.html - item05 - (нажмите) = "гoToDetailPage (detail) ">>> detail.html - (click) =" openModal () ">>> modalpage05.html

Другими словами:

В файле list.html при нажатии item01 открывается файл detail.html, при нажатии кнопки открывается modalpage01.html.
В файле list.html открывается элемент 02detail.html, нажмите на кнопку, чтобы открыть modalpage02.html.
и т. д. *

Вот изображениеЯ сделал, чтобы больше визуализировать свое видение.

dlcardozo · Answer 1 · 01 июня 2018

Вы можете использовать декоратор @IonicPage() для обработки этого случая.

Если вы запустите ionic g page MyModal01, который создаст компонент с декоратором @IonicPage().

Так что вы можетесделайте что-то подобное со своей кнопкой в шаблоне страницы с вашими данными:

<button ion-button [navPush]="getShowMorePage(detail)">Open Project</button>

И это на вашей странице с подробностями .ts:

getShowMorePage(detail: any): string {
   return `MyModal0${detail.id}Page`; // Just as an example I used the Id.
}

Это загрузит MyModal0XPage, просто помните, что вынеобходимо создать страницу, не являющуюся компонентом с ионным кликом, и не удалять декоратор @IonicPage().

Здесь у вас есть ссылка на stackblitz:

https://stackblitz.com/edit/ionic-t6sas6

Экспортируйте проект, измените файл main.ts и поместите его внутрь:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Также обновите файл package.json в этом разделе:

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

Затем запустите ionic serve впапка проекта.

Обычно это не нужно делать в проекте стекаблиц, это просто потому, что DeepLink of Ionic не работал в сети.

Ionic 3 - Push-страница без PageName, но с / выражением / переменной /…?

Введение

Код

Сводка

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Ionic 3 - Push-страница без PageName, но с / выражением / переменной /…?

Введение

Код

Сводка

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Нет похожих вопросов