ionic3-未设置导航根：无效链接：FeedbackPage

Question

I want when I clicked feedback button can go feedback page, but after I set up all, after clicked still showing 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 }
  ];

The last one is the feedback button, when I click feedback button just back to tabsPage not go into feedback page.

UPDATE:

I am checking this code in 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();
        }
  }

Is it need to change 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

Feedback page doesn't have own module because I am using 'ionic generate page Feedback --no-module' to generate my Feedback page

This means you are not using lazy loading and the page is not an IonicPage .

@IonicPage()

which sets the name property as the component name by default.

This will automatically create a link to the MyPage component using the same name as the class, name: 'MyPage'. The page can now be navigated to by using this name.

And also you dont have PageModule

In your case, you will have to set the imported component/page and not the string with your NavController functions.

Do:

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

Answer 2

Based on your app structure, you app might be based on ionic conference starter template, what iv'e done is remove extra parameters in IonicModule.forRoot(ConferenceApp) , like links array and extra objects, then do the lazy loading for your pages by Adding and importing an @IonicPage() on your components.

Before:

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' }
      ]

After:

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