Angular 离子3。NavController没有提供程序

我的问题与我们发现的问题相似

但我不确定他的情况是否相同，因为有时当我停止应用程序并重新使用ionic serve时，错误就会消失。错误再次随机返回。我注意到，当我在app.component.ts构造函数中使用debugger语句时，我可以绕过错误。任何帮助都将不胜感激。多谢各位

这是我的密码

app.component.ts

export class MyApp {
    @ViewChild('content') nav: Nav;

    rootPage: any = HomePage;

    pages: Array<{ title: string, component: any }>;


    constructor(public platform: Platform,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen) {
    this.initializeApp();

    this.pages = [
      { title: 'Dashboard', component: DashboardPage },
    ];
    debugger
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

login.ts

export class LoginPage {
  username: string;
  password: string;

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public userProvider: UserProvider,
    public storage: Storage,
    public alertCtrl: AlertController,
    public menuCtrl: MenuController) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  login() {
    console.log("Logging in...", this.username, this.password);
    var credentials = { 'email': this.username, 'password': this.password };
    this.userProvider.login(credentials).then((validResponse: any) => {
      console.log('success', validResponse);
      var data = validResponse.data;
      this.storage.set('_token', data.token);
      this.navCtrl.setRoot(DashboardPage);
    }).catch((errorResponse: any) => {
      console.log('error', errorResponse);
      var title = '';
      var subTitle = '';
      title = "Oops!"
      if (errorResponse.status == 401) {
        subTitle = "Invalid Username/Password";
      } else {
        var errorObject = errorResponse.error;
        if (errorObject.errors) {
          for (let error of errorObject.errors) {
            subTitle += error + '. ';
          }
        } else {
          subTitle = errorResponse.message;
        }
      }
      this.presentAlert(title, subTitle);
    });
  }

  presentAlert(title, subTitle) {
    let alert = this.alertCtrl.create({
      title: title,
      subTitle: subTitle,
      buttons: ['Ok']
    });
    alert.present();
  }

  ionViewWillEnter() {
    this.menuCtrl.enable(false);
  }
  ionViewWillLeave() {
    this.menuCtrl.enable(true);
  }

}

login.html

<ion-content padding>
  <div class="login-holder">
    <ion-img class="logo" width="120" src="../../assets/imgs/logo.png"></ion-img>
    <br>
    <ion-img class="hero" width="250" src="../../assets/imgs/restaurant.png"></ion-img>
    <ion-input class="username" [(ngModel)]="username" type="text" placeholder="Phone or Email"></ion-input>
    <ion-input class="password" [(ngModel)]="password" type="password" placeholder="Password"></ion-input>
    <button class="login" ion-button full (click)="login()">Login</button>
  </div>
</ion-content>

登录

我的流程是这样的，主页在进入登录页面之前是一个临时屏幕， 超时后，我进入LoginPage或Dashboard页面，具体取决于本地存储中是否已经有令牌。从登录页面，我将用户带到仪表板页面

因为我对棱角和离子还不熟悉，我甚至不确定我是否做对了。我已经研究了stack overflow中所有类似的问题

• 他们中的大多数人通过在构造函数中传递App模块并从App中检索navcontroller来获得解决方案。但这对我不起作用
• 有些人建议检查导入路径，因此我与docs&starter project交叉验证它似乎是正确的
• 一些人建议删除构造函数中传递的nav控制器，但如果您检查我的代码，我没有在app.component.ts的构造函数中传递，我只传递了页面的构造函数，该构造函数位于爱奥尼亚生成页面命令生成的框架代码中

---

再次感谢您抽出时间。

将您的Home.ts更改为：

export class HomePage {
  token: string;
  constructor(public navCtrl: NavController,
    public menuCtrl: MenuController,
    public storage: Storage) {

  }

  ionViewWillEnter() {
    this.menuCtrl.enable(false);
  }
  ionViewWillLeave() {
    this.menuCtrl.enable(true);
  }

  ionViewDidLoad() {
    setTimeout(() => {
      this.storage.get('_token').then((token) => {
        this.token = token;
        if (this.token && this.token.length > 0) {
          this.navCtrl.setRoot(DashboardPage)
        } else {
          this.navCtrl.setRoot(LoginPage)
        }
      }).catch((error) => {
        console.log(error);
        this.navCtrl.setRoot(LoginPage)
      });
    }, 1000)
  }

}

---

在四处看了一会儿之后。我发现了问题。我在家里找不到装饰师了。添加后问题得到解决。

已更改此设置。但问题依然存在。

<ion-content padding>
  <div class="login-holder">
    <ion-img class="logo" width="120" src="../../assets/imgs/logo.png"></ion-img>
    <br>
    <ion-img class="hero" width="250" src="../../assets/imgs/restaurant.png"></ion-img>
    <ion-input class="username" [(ngModel)]="username" type="text" placeholder="Phone or Email"></ion-input>
    <ion-input class="password" [(ngModel)]="password" type="password" placeholder="Password"></ion-input>
    <button class="login" ion-button full (click)="login()">Login</button>
  </div>
</ion-content>

export class HomePage {
  token: string;
  constructor(public navCtrl: NavController,
    public menuCtrl: MenuController,
    public storage: Storage) {

  }

  ionViewWillEnter() {
    this.menuCtrl.enable(false);
  }
  ionViewWillLeave() {
    this.menuCtrl.enable(true);
  }

  ionViewDidLoad() {
    setTimeout(() => {
      this.storage.get('_token').then((token) => {
        this.token = token;
        if (this.token && this.token.length > 0) {
          this.navCtrl.setRoot(DashboardPage)
        } else {
          this.navCtrl.setRoot(LoginPage)
        }
      }).catch((error) => {
        console.log(error);
        this.navCtrl.setRoot(LoginPage)
      });
    }, 1000)
  }

}