Question

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

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

componentDidUpdate(){
    if(this.props.id){
        if(!this.props.loadedPost || (this.state.loadedPost && this.state.loadedPost.ID !== this.props.id)){
            axios.get('https://public-api.wordpress.com/rest/v1.1/sites/xhehehshs.wordpress.com/posts/'+this.props.id)
            .then( response => {
                this.setState({ loadedPost: response.data });
            });
        }  
    }
}

我也将它添加到我的app.component.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 { }

我想我在参展商文件中正确地说出来了。

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

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

Answer 1

看起来您正在尝试将其添加为标签。

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

Answer 2

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

<块引用>

ionic g 页面页面/公告

将页面添加到Ionic Conference App

2 个答案: