我正在Ionic Ecommerce App中执行登录，当用户使用凭据登录时，登录后我无法在侧栏中显示用户名称。 错误：没有NavParams提供程序。
这是我的 loginpage.html ：
<ion-header>
<ion-navbar swipeBackEnabled="false">
<button ion-button menuToggle start>
<ion-icon name="menu"></ion-icon>
</button>
<div class="mydiv1"><img src="assets/imgs/logo3.png" class="slide-image11" /></div>
<div class="mydiv2">
<ion-icon name="cart" class="myicon22" (click)="cardpage2()"></ion-icon>
<ion-icon name="heart" class="myicon22"></ion-icon>
<ion-icon name="search" class="myicon22"></ion-icon>
</div>
</ion-navbar>
</ion-header>
<ion-content padding class="newbg11">
<ion-grid align-items-center justify-content-center style="height: 100%;">
<ion-row align-items-center justify-content-center style="height: 100%;">
<ion-col align-self-center col-12 style="text-align: center;">
<form [formGroup]="todo" (ngSubmit)="getloginUsers()">
<ion-list>
<ion-item class="newitem2">
<ion-input placeholder="Username" type="text" [(ngModel)]="userData.username" formControlName="username" required></ion-input>
</ion-item>
<ion-item class="newitem2">
<ion-input placeholder="Password" type="password" [(ngModel)]="userData.password" formControlName="password" required></ion-input>
</ion-item>
<div padding>
<button [disabled]="!todo.valid" ion-button type="submit" class="newbtn11" color="primary" block>Login</button>
</div>
</ion-list>
</form>
<h2><span>OR</span></h2>
<span class="newspan2">Register | Forgot Password</span>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
这是我的 loginpage.ts ：
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { RestapiProvider } from '../../providers/restapi/restapi';
import { ListPage } from '../list/list';
import { FrontPage } from '../front/front';
import { CartPage } from './../cart/cart';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';
@IonicPage()
@Component({
selector: 'page-loginpage',
templateUrl: 'loginpage.html',
})
export class LoginpagePage {
todo : FormGroup;
responseData : any;
userData = {"username": "", "password": ""};
constructor(public navCtrl: NavController, public navParams: NavParams,
public restProvider: RestapiProvider, private formBuilder: FormBuilder, private alertCtrl: AlertController) {
this.todo = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required],
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginpagePage');
}
getloginUsers(){
this.restProvider.getUsers(this.userData, 'user_Login').subscribe((data) => {
console.log(data);
if (data) {
this.responseData = data;
if (this.responseData.status === 'success') {
this.navCtrl.push(MyApp,{
param1: this.responseData.msg.name,
});
}
else{
this.presentAlert();
}
}
});
}
presentAlert() {
let alert = this.alertCtrl.create({
title: 'Incorrect Username Or Password',
buttons: ['Dismiss']
});
alert.present();
}
cardpage2()
{
this.navCtrl.push(CartPage);
}
}
问题是登录后，由于显示错误，所以无法在侧栏中显示“用户名”和“注销”按钮。
这是我的 app.html ：在此，我制作了侧边栏，其中显示了用户名和注销按钮。
<ion-menu [content]="content">
<ion-content class="mymenu22">
<ion-grid class="formenu2">
<ion-row align-items-center class="mymenuicons22">
<ion-col col-4>
<img class="imgsection12" src="assets/imgs/hipster-man.jpg" />
</ion-col>
<ion-col class="mycols11" col-8>
<h1 class="mymenuh2">Welcome {{this?.uname}}</h1>
<span menuClose (click)="loginpage2()" *ngIf="menuclick"><ion-icon menuClose name="log-in" class="myicons22"></ion-icon> Login/SignUp </span>
<span menuClose (click)="logoutClicked()" *ngIf="menuclick2"><ion-icon menuClose name="log-out" class="myicons22"></ion-icon> Logout </span>
</ion-col>
</ion-row>
</ion-grid>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" class="menu2">
<ion-icon name="{{p.name2}}"></ion-icon> {{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
在此边栏中，我在用户登录后显示“用户名”和“注销”按钮，但显示错误。
这是我的 app.component.ts ：
import { FrontPage } from './../pages/front/front';
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, NavController, NavParams} from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { ProductPage } from '../pages/product/product';
import { LoginpagePage } from '../pages/loginpage/loginpage';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
menuclick: boolean = true;
menuclick2: boolean = false;
rootPage: any = FrontPage;
pages: Array<{title: string, component: any, name2: string}>;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public navParams: NavParams) {
this.initializeApp();
this.uname = this.navParams.get('param1');
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Home', component: FrontPage, name2: 'home' },
{ title: 'Product Categories', component: ProductPage, name2: 'basket' },
{ title: 'Merchandise', component: ProductPage, name2: 'man' },
{ title: 'My Orders', component: ProductPage, name2: 'cart' },
];
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
openPage(page) {
this.nav.setRoot(page.component);
}
loginpage2()
{
this.nav.push(LoginpagePage);
}
logoutClicked() {
console.log("Logout");
this.nav.pop();
}
}
我已将用户名从loginpage.ts传递到app.component.ts，但显示错误。错误：没有NavParams的提供程序。非常感谢您的帮助。
答案 0 :(得分：1)
在这里，我将使用本地存储为您编写一个简单的方法。
登录后，您需要将用户名保存在本地存储中
window.localStorage.setItem("username", this.responseData.msg.name);
然后，您使用 navController 在您的首页（ FrontPage ）上设置根目录
this.navCtrl.setRoot(FrontPage)
然后在您的 app.component.ts 中，您需要一个函数来返回保存在本地存储中的用户名。
public getUsername(){
if(window.localStorage.getItem("username"))
return window.localStorage.getItem("username");
}
然后，在您的 app.html 上，您将更改为
<h1 class="mymenuh2">Welcome {{getUsername()}}</h1>
那应该可行！
但是请记住，您需要在 FrontPage
中使用菜单切换答案 1 :(得分：0)
app.component.ts是在您的应用程序中呈现的第一件事。您无法导航到它，显然，您无法接收到参数。我建议您使用提供程序来存储您的用户数据，然后从提供程序设置侧边菜单数据。
我不知道您是否了解我...如果您需要更多帮助，我在这里。
PS：从构造函数中删除NavParams，应该可以使用！