Я выполняю вход в приложение Ionic Ecommerce и, когда пользователь входит в систему с учетными данными, я не могу показать имя пользователя на боковой панели после входа в систему. Ошибка: нет провайдера для 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. Любая помощь очень ценится.