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

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没有进入反馈页面。

UPDATE：

我检查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模块”生成我的反馈页面

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

@IonicPage() 

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

这会自动创建一个到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

根据您的应用程序的结构，你的应用程序可能会基于离子发布会启动模板，什么iv'e做是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'); 
    } 
}