Ionic2：无法从页面 A 导航到页面 B，但我可以从页面 A 到 C 然后是 B答案

【问题标题】：Ionic2: Can't navigate from Page A to Page B but I can from Page A to C then BIonic2：无法从页面 A 导航到页面 B，但我可以从页面 A 到 C 然后是 B
【发布时间】：2017-02-09 04:16:22
【问题描述】：

页面 A = 登录；

页面 B = 欢迎；

页面 C = 列表；

违规组件 = DefaultPopover;

所以基本上我无法从页面 A 导航到页面 B，除非我从欢迎页面中删除一个组件或从 DefaultPopover 中注释掉注销功能。

相同的组件在页面 C 上工作正常。如果我从页面 A -> 页面 C 导航，我可以正常导航到页面 B。在 DefaultPopover 中，如果我将注销更改为指向 WelcomeController 一切正常。我不确定发生了什么。

我在下面包含了控制器和我的离子信息输出

登录控制器

import {ToastController, NavController, List} from 'ionic-angular/index';
import {WelcomeController} from '../index';
import {Component} from '@angular/core';
import {ListController} from '../content/short_form/list/list.controller';

@Component({
  templateUrl: 'build/pages/login/login.controller.html'
})
export class LoginController
{
  public username : string;
  public password : string;

  constructor(public toast : ToastController, public navCtrl: NavController)
  {
  }

  public checkAuth()
  {
    if (this.username !== 'test' && this.password !== 'test') {
      this.toast.create({
        showCloseButton : true,
        message : 'Username and password wrong',
        position : 'bottom',
        closeButtonText : 'Ok',
        dismissOnPageChange: true
      }).present();
    } else{
      this.navCtrl.setRoot(WelcomeController);
    }
  }
}

欢迎控制器

import {Component} from '@angular/core';
import {PopoverController} from 'ionic-angular/index';
import {DefaultPopover} from '../../components/popover/default/default.popover';

@Component({
  templateUrl : 'build/pages/welcome/welcome.controller.html'
})
export class WelcomeController
{

  constructor(public popoverCtrl : PopoverController)
  {
  }

  public presentPopover(event)
  {
    this.popoverCtrl.create(DefaultPopover, {}, {
      enableBackdropDismiss : true,
      showBackdrop : true
    }).present({
      ev : event
    });
  }
}

列表控制器

import {Component} from '@angular/core';
import {
  ShortFormEntity,
  DetailsController
} from "../index";
import {ImageService} from "../../../../components/index";
import {NavController, PopoverController} from 'ionic-angular';
import {ShortFormService} from '../services/short_form.service';
import {DefaultPopover} from '../../../../components/popover/default/default.popover';

@Component({
  templateUrl : 'build/pages/content/short_form/list/list.controller.html',
  providers : [ShortFormService, ImageService]
})
export class ListController
{

  public list : [ShortFormEntity];
  private navCtrl : NavController;

  constructor(shortFormService : ShortFormService, navCtrl : NavController, public popoverCtrl: PopoverController)
  {
    this.list = shortFormService.shortForms;
    this.navCtrl = navCtrl
  }

  public createShortForm()
  {
    this.navCtrl.push(DetailsController);
  }

  public openShortForm(id)
  {
    this.navCtrl.push(DetailsController, {
      id : id
    })
  }

  public presentPopover(event)
  {
    this.popoverCtrl.create(DefaultPopover, {}, {
      enableBackdropDismiss : true,
      showBackdrop : true
    }).present({
      ev : event
    });
  }
}

默认弹出框

import {Component} from '@angular/core';
import {ViewController, NavController} from 'ionic-angular/index';
import {LoginController} from '../../../pages/login/login.controller';

@Component({
  templateUrl : 'build/components/popover/default/default.popover.html'
})
export class DefaultPopover
{
  constructor(public viewCtrl : ViewController, public navCtrl : NavController)
  {
  }

  close()
  {
    this.viewCtrl.dismiss();
  }

  logout()
  {
    this.navCtrl.setRoot(LoginController);
  }
}

离子信息

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v4.5.0
Xcode version: Xcode 7.2.1 Build version 7C1002

编辑：

澄清@andreaspfr 关于导入的问题。我遵循了 angular2-seed 范例，每个目录都有一个 index.ts 文件，用于导入所有子目录和 ts 文件。让导入更简洁。

pages/index.ts 的样子

export * from './content/index';
export * from './login/index';
export * from './welcome/index';

【问题讨论】：

标签： javascript angular ionic-framework ionic2

【解决方案1】：

您确定您正在正确加载 WelcomePage 吗？在 Login.ts 中，我可以看到您像 import {WelcomeController} from '../index'; 那样集成了 WelcomePage，但在 Welcome.ts 中，您从页面目录 build/pages/welcome/welcome.controller.html 加载模板。我想应该是这样的../pages/welcome

【讨论】：