向 Ionic Conference App 添加页面

Question

我目前正在使用 Ionic 会议应用程序 (https://github.com/ionic-team/ionic-conference-app)，我正在尝试向菜单添加一个新页面。

我创建了页面（参展商）并将它们添加到我的 app.module.ts

import { ExhibitorsPage } from '../pages/exhibitors/exhibitors';

    @NgModule({
      declarations: [
        ConferenceApp,
        ExhibitorsPage,
      ],
      imports: [
        BrowserModule,
        HttpModule,
        IonicModule.forRoot(ConferenceApp, {}, {
          links: [
            { component: ExhibitorsPage, name: 'Exhibitors', segment: 'exhibitors' }
          ]
        }),
        IonicStorageModule.forRoot()
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        ConferenceApp,
        ExhibitorsPage,
      ],
      providers: [
        { provide: ErrorHandler, useClass: IonicErrorHandler },
        ConferenceData,
        UserData,
        InAppBrowser,
        SocialSharing,
        SplashScreen
      ]
    })
    export class AppModule { }

我也将它添加到我的 app.component.ts

  import { Component, ViewChild } from '@angular/core';

  import { Events, MenuController, Nav, Platform } from 'ionic-angular';
  import { ExhibitorsPage } from '../pages/exhibitors/exhibitors';

  export interface PageInterface {
    title: string;
    name: string;
    component: any;
    icon: string;
    logsOut?: boolean;
    index?: number;
    tabName?: string;
    tabComponent?: any;
  }

  @Component({
    templateUrl: 'app.template.html'
  })
  export class ConferenceApp {
    // the root nav is a child of the root app component
    // @ViewChild(Nav) gets a reference to the app's root nav
    @ViewChild(Nav) nav: Nav;

    // List of pages that can be navigated to from the left menu
    // the left menu only works after login
    // the login page disables the left menu
    appPages: PageInterface[] = [
      { title: 'Schedule', name: 'TabsPage', component: TabsPage, tabComponent: SchedulePage, index: 0, icon: 'calendar' },
      { title: 'Speakers', name: 'TabsPage', component: TabsPage, tabComponent: SpeakerListPage, index: 1, icon: 'contacts' },
      { title: 'Map', name: 'TabsPage', component: TabsPage, tabComponent: MapPage, index: 2, icon: 'map' },
      { title: 'About', name: 'TabsPage', component: TabsPage, tabComponent: AboutPage, index: 3, icon: 'information-circle' },
      { title: 'Exhibitors', name: 'TabsPage', component: TabsPage, tabComponent: ExhibitorsPage, index: 4, icon: 'globe' }
    ];
    loggedInPages: PageInterface[] = [
      { title: 'Account', name: 'AccountPage', component: AccountPage, icon: 'person' },
      { title: 'Support', name: 'SupportPage', component: SupportPage, icon: 'help' },
      { title: 'Logout', name: 'TabsPage', component: TabsPage, icon: 'log-out', logsOut: true }
    ];
    loggedOutPages: PageInterface[] = [
      { title: 'Login', name: 'LoginPage', component: LoginPage, icon: 'log-in' },
      { title: 'Support', name: 'SupportPage', component: SupportPage, icon: 'help' },
      { title: 'Signup', name: 'SignupPage', component: SignupPage, icon: 'person-add' }
    ];
    rootPage: any;

    constructor(
      public events: Events,
      public userData: UserData,
      public menu: MenuController,
      public platform: Platform,
      public confData: ConferenceData,
      public storage: Storage,
      public splashScreen: SplashScreen
    ) {

      this.rootPage = TabsPage;
      this.platformReady();

      // Check if the user has already seen the tutorial
      this.storage.get('hasSeenTutorial')
        .then((hasSeenTutorial) => {
          if (hasSeenTutorial) {
            this.rootPage = TabsPage;
          } else {
            this.rootPage = TutorialPage;
          }
          this.platformReady()
        });    

      // load the conference data
      confData.load();

      // decide which menu items should be hidden by current login status stored in local storage
      this.userData.hasLoggedIn().then((hasLoggedIn) => {
        this.enableMenu(hasLoggedIn === true);
      });
      this.enableMenu(true);

      this.listenToLoginEvents();   

    }

    openPage(page: PageInterface) {
      let params = {};

      // the nav component was found using @ViewChild(Nav)
      // setRoot on the nav to remove previous pages and only have this page
      // we wouldn't want the back button to show in this scenario
      if (page.index) {
        params = { tabIndex: page.index };
      }

      // If we are already on tabs just change the selected tab
      // don't setRoot again, this maintains the history stack of the
      // tabs even if changing them from the menu
      if (this.nav.getActiveChildNavs().length && page.index != undefined) {
        this.nav.getActiveChildNavs()[0].select(page.index);
      } else {
        // Set the root of the nav with params if it's a tab index
        this.nav.setRoot(page.name, params).catch((err: any) => {
          console.log(`Didn't set nav root: ${err}`);
        });
      }

      if (page.logsOut === true) {
        // Give the menu time to close before changing to logged out
        this.userData.logout();
      }
    }

    openTutorial() {
      this.nav.setRoot(TutorialPage);
    }

    listenToLoginEvents() {
      this.events.subscribe('user:login', () => {
        this.enableMenu(true);
      });

      this.events.subscribe('user:signup', () => {
        this.enableMenu(true);
      });

      this.events.subscribe('user:logout', () => {
        this.enableMenu(false);
      });
    }

    enableMenu(loggedIn: boolean) {
      this.menu.enable(loggedIn, 'loggedInMenu');
      this.menu.enable(!loggedIn, 'loggedOutMenu');
    }

    platformReady() {
      // Call any initial plugins when ready
      this.platform.ready().then(() => {
        this.splashScreen.hide();

      });
    }

    isActive(page: PageInterface) {
      let childNav = this.nav.getActiveChildNavs()[0];

      // Tabs are a special case because they have their own navigation
      if (childNav) {
        if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
          return 'primary';
        }
        return;
      }

      if (this.nav.getActive() && this.nav.getActive().name === page.name) {
        return 'primary';
      }
      return;
    }
  }

我认为我在 exportors.ts 文件中正确调用了它

            import { Component } from '@angular/core';
            //import { ConferenceData } from '../../providers/conference-data';
            import { NavController, NavParams } from 'ionic-angular';

            @IonicPage()
            @Component({
                selector: 'page-exhibitors',
                templateUrl: 'exhibitors.html',
            })
            export class ExhibitorsPage {

                constructor(
                    public navCtrl: NavController, 
                    public navParams: NavParams
                ) {}

                ionViewDidLoad() {
                    console.log('ionViewDidLoad ExhibitorsPage');
                }

            }

我可以让参展商出现在菜单中，但是当我按下时，我无法打开参展商页面。任何帮助将不胜感激。

Answer 1

您似乎正在尝试将其添加为选项卡。

您需要将条目添加到pages/tabs-page/tabs-page.html 和/pages/tabs-page/tabs-page.ts

Answer 2

在 ionic Conference 应用程序内部页面中，使用以下命令创建一个新页面

ionic g page 页面/公告