Ionic2 navController 属性未按预期工作答案

【问题标题】：Ionic2 navController properties not working as expectedIonic2 navController 属性未按预期工作
【发布时间】：2017-02-05 00:57:47
【问题描述】：

我正在尝试构建一个具有以下工作流程的应用。

登录页面
主页
创建请求页面 -> 出现在主页和菜单中
请求成功页面 -> 请求创建成功时
请求列表页面 -> 出现在主页和菜单中
请求详细信息页面 -> 点击请求项

当用户给出正确的凭据后，我从登录页面调用服务。如果成功，我将主页作为导航控制器的根。

if(getLoginDetails.status == "success")
{
this.navCtrl.setRoot(HomePage);
}

但是当我在 HomePage 构造函数中使用this.navCtrl.length() 时，它仍然显示 2。当我刚刚用主页替换 LoginPage 导航堆栈的根元素时，怎么会发生这种情况。根据我的理解，计数应该为 1。除了登录之外，每个页面都有swipeEnabled = true 菜单和一个后退按钮。现在假设用户转到主页然后createRequestPage然后使用菜单转到requestListPage，现在我需要当用户单击返回按钮时它应该将用户带到主页。为此我的方法是当用户单击菜单时，我将删除所有导航堆栈中的页面，除了第一个是我们的根主页。我尝试过这种方式，但它不起作用-

this.navCtrl.remove(1,this.navCtrl.length(),{}).then(
()=>{
      this.navCtrl.push(RequestListPage)
});

但这似乎不起作用。有人可以帮我解决这个问题。还有一些更好的 ionic2 NavController 文档。

【问题讨论】：

标签： angular ionic-framework ionic2 angular2-routing

【解决方案1】：

您的@Component 中是否设置了selector 标签？这是 Ionic 中的一个小错误，它会导致页面将自身推入堆栈，这可以解释为什么长度为 2 以及为什么你有一个后退按钮。

如果是这种情况，删除 selector 应该可以解决问题。

如果这个人是否通过菜单，为什么不直接切换一个布尔值呢？如果该布尔值为真，则只需推送到主页。代码更简单，也可能更简洁。

【讨论】：

我的应用中没有选择器。

【解决方案2】：

如果您将 navCtrl 放在提供程序中：

在提供者导入中

import { NavController, App } from 'ionic-angular';

在导出类初始化中

private navCtrl: NavController;

在构造函数中

constructor(private app:App) {

   this.navCtrl = app.getActiveNav();

}

定义一个函数去首页：

goToHomePage() {

    this.navCtrl.setRoot(HomePage);

}

现在可以在任何你喜欢的页面中调用 this.navCtrl

import { YourProvider } from "../../your-provider";


@Component({

    selector: 'page',

    templateUrl: 'page.html',

    providers: [YourProvider]

})


export class YourPage{

  constructor(private yourProvider : YourProvider) {

}

goToHome() {
    this.yourProvider.goToHomePage();
}

现在您可以使用 navCtrl

祝你好运

【讨论】：