我的问题与此处发现的问题相似
但我不确定它是否对他来说是相同的情况，因为有时当我停止应用程序并使用 ionic serve 重新启动时错误会消失。错误再次随机返回。我注意到当我在 app.component.ts 构造函数中使用调试器语句时，我可以绕过该错误。任何帮助，将不胜感激。谢谢你。
这是我的代码
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);
}
}
应用程序.html
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #content swipeBackEnabled="false" [root]="rootPage"></ion-nav>
主页.ts
export class HomePage {
token: string;
constructor(public navCtrl: NavController,
public menuCtrl: MenuController,
public storage: Storage) {
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)
}
ionViewWillEnter() {
this.menuCtrl.enable(false);
}
ionViewWillLeave() {
this.menuCtrl.enable(true);
}
}
登录.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);
}
}
登录.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>
我的流程是这样的，主页是进入登录页面之前的临时屏幕，超时后我进入登录页面或仪表板页面，具体取决于它们是否在本地存储中已有令牌。从登录页面，我将用户带到仪表板页面。
由于我是角度和离子的新手，我什至不确定我是否做对了。我研究了堆栈溢出中的所有类似问题。
- 他们中的大多数通过在构造函数中传递 App 模块并从应用程序中检索 navcontroller 来获得解决方案。但这对我不起作用。
- 有人建议检查导入路径，因此我与文档和启动项目交叉验证它似乎是正确的。
- 有些人建议在构造函数中删除传递的导航控制器，但如果你检查我的代码，我没有在 app.component.ts 中传递构造函数，我只传递了页面的构造函数，它位于由 ionic generate page 命令生成的骨架代码中。
再次感谢您的时间。