Ionic2：不能在服务中使用 NavController。 [复制]

Question

我还是个学习者。不仅在 Ionic 中，在 Angular 中也是如此。

我已经编写了一些页面，并希望在每个页面中添加一个页脚，以便用户可以在所有主页之间进行切换。在写完第 2 页后，我发现如果有这样的服务会很好，因为我再次使用了相同的方法。

这是我的服务现在的样子：

export class Navigation {
  public navCtrl: NavController;

  onLoadHome(){
    this.navCtrl.push(HomePage);
  }   
}

当我现在在 HTML 模板中调用 Navigator.onLoadHome() 时，出现以下错误： 无法读取未定义的属性“推送”。

所以我知道我的应用找到了服务并找到了方法。但是我的 navCtrl 是未定义的。我通过执行以下操作尝试了另一种方法：

export class Navigation {
  constructor(private navCtrl: NavController){}

  onLoadHome(){
    this.navCtrl.push(HomePage);
  }
}

现在我收到另一条错误消息：无法解析导航的所有参数。

我真的不知道该怎么做才能完成这项工作。我希望你能帮助我。

（顺便说一句。我已经稍微缩短了类。但是其他方法与 onLoadHome 一样，仅适用于其他页面。）

Answer 1

这不是在页面之间导航的好方法，但我希望这可能对您有所帮助

在你想使用服务的页面，你必须导入服务然后这样设置

public mNavigation: Navigation;

constructor(public navCtrl: NavController, public navParams: NavParams) {
   this.mNavigation = new Navigation(navCtrl)
}

当您想导航时，只需拨打this.mNavigation.onLoadHome();

---

更好的方法是在服务中使用App 的Nav 而不是NavCtrl。看起来是这样的

import { App } from 'ionic-angular';

@Injectable()
export class NavigationProvider {

  constructor(public app: App) {
  }

  onLoadHome(){
    this.app.getActiveNav().push(HomePage);
  }
}

那么你的页面会是这样的

constructor(public navCtrl: NavController, 
    public mNavigationProvider: NavigationProvider,
    public navParams: NavParams) {
  }

  onNavigate() {    
    this.mNavigationProvider.onLoadHome();
  }