Question

我想当我点击反馈按钮时可以进入反馈页面，但是在我设置好后，点击后仍然显示tabsPage。

app.component.ts

appPages: PageInterface[] = [
    { title: '新闻', name: 'TabsPage', component: TabsPage, index: 0, icon: 'ios-globe-outline' },
    { title: 'SOS', name: 'TabsPage', component: TabsPage, index: 1, icon: 'call' },
    { title: '服务', name: 'TabsPage', component: TabsPage, index: 2, icon: 'people' },
    { title: '反馈', name: 'FeedbackPage', component: FeedbackPage, icon: 'contacts' }
  ];
  loggedInPages: PageInterface[] = [
    { title: '新闻', name: 'TabsPage', component: TabsPage, index: 0, icon: 'ios-globe-outline' },
    { title: 'SOS', name: 'TabsPage', component: TabsPage, index: 1, icon: 'call' },
    { title: '服务', name: 'TabsPage', component: TabsPage, index: 2, icon: 'people' },
    { title: '反馈', name: 'FeedbackPage', component: FeedbackPage, icon: 'contacts' },
    { title: '注销', name: 'TabsPage', component: TabsPage, icon: 'log-out', logsOut: true }
  ];

最后一个是反馈按钮，当我点击反馈按钮时返回到tabsPage，不进入反馈页面。

更新：

我正在 app.components.ts

中查看此代码

openPage(page: PageInterface) {
    let params = {};
        if (page.index) {
          params = { tabIndex: page.index };
        }

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

是否需要更改params？

app.html

<ion-menu id="loggedOutMenu" [content]="content">
  <ion-header>
    <ion-toolbar color="danger">
      <ion-title>菜单</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <ion-list-header>请登录</ion-list-header>
      <button color="wechat" style="width:40%" ion-button clear (click)= "wechatLogin()">
        <ion-icon name="minan-login-wechat"></ion-icon>
      </button>
      <button color="facebook" style="width:40%" ion-button clear (click)= "FBLogin()">
        <ion-icon name="minan-login-facebook"></ion-icon>
      </button>

      <ion-list-header>导航栏</ion-list-header>
      <button menuClose ion-item *ngFor="let p of appPages" (click)="openPage(p)">
        <ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
        {{p.title}}
      </button>
    </ion-list>

  </ion-content>
</ion-menu>

Answer 1

反馈页面没有自己的模块，因为我使用'离子生成页面反馈--no-module'来生成我的反馈页面

这意味着您未使用延迟加载 且页面不是IonicPage。

@IonicPage()

默认情况下将name属性设置为组件名称。

这将使用与类相同的名称自动创建指向MyPage组件的链接，名称为：'MyPage'。现在可以使用此名称导航到该页面。

而且你没有PageModule

在您的情况下，您必须使用NavController函数设置导入的组件/页面而不是字符串。

执行：

this.nav.setRoot(page.component, params).catch((err: any) => {
            console.log(`Didn't set nav root: ${err}`);
          });//page.component

Answer 2

根据您的应用程序结构，您的应用程序可能基于离子会议启动器模板，我所做的是删除IonicModule.forRoot(ConferenceApp)中的额外参数，如链接数组和额外对象，然后为您的延迟加载页面添加和导入组件上的@IonicPage()。

<强>之前：

IonicModule.forRoot(ConferenceApp, {}, {
      links: [
        { component: TabsPage, name: 'TabsPage', segment: 'tabs-page' },
        { component: SchedulePage, name: 'Schedule', segment: 'schedule' },
        { component: SessionDetailPage, name: 'SessionDetail', segment: 'sessionDetail/:sessionId' },
        { component: ScheduleFilterPage, name: 'ScheduleFilter', segment: 'scheduleFilter' },
        { component: SpeakerListPage, name: 'SpeakerList', segment: 'speakerList' },
        { component: SpeakerDetailPage, name: 'SpeakerDetail', segment: 'speakerDetail/:speakerId' },
        { component: MapPage, name: 'Map', segment: 'map' },
        { component: AboutPage, name: 'About', segment: 'about' },
        { component: TutorialPage, name: 'Tutorial', segment: 'tutorial' },
        { component: SupportPage, name: 'SupportPage', segment: 'support' },
        { component: AccountPage, name: 'AccountPage', segment: 'account' },
        { component: SignupPage, name: 'SignupPage', segment: 'signup' }
      ]

<强>后：

IonicModule.forRoot(ConferenceApp),

<强> login.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';

@NgModule({
  declarations: [
    LoginPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
  ],
})
export class RequestTrainingPageModule {}

<强> login.ts

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { IonicPage, NavController } from 'ionic-angular';

import { UserOptions } from '../../interfaces/user-options';
import { UserData } from '../../providers/user-data';

import { TabsPage } from '../tabs-page/tabs-page';

@IonicPage()
@Component({
  selector: 'page-user',
  templateUrl: 'login.html'
})
export class LoginPage {
  login: UserOptions = { username: '', password: '' };
  submitted = false;

  constructor(public navCtrl: NavController, public userData: UserData) { }

  onLogin(form: NgForm) {
    this.submitted = true;

    if (form.valid) {
      this.userData.login(this.login.username);
      this.navCtrl.push(TabsPage);
    }
  }

  onSignup() {
    this.navCtrl.push('SignupPage');
  }
}

ionic3 - 未设置nav root：无效链接：FeedbackPage

2 个答案: