将Navparams从一个组件传递到App组件时出现错误在Ionic App中

问题描述 投票：0回答：2

我在Ionic电子商务应用程序中执行登录，当用户使用凭据登录时，我无法在登录后在侧栏中显示用户的名称。错误：没有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的提供程序。任何帮助深表感谢。

angular authentication ionic-framework ionic3
2个回答
1
投票

我将在这里写一个使用本地存储的简单方法。

登录后，您需要将用户名保存在本地存储window.localStorage.setItem("username", this.responseData.msg.name);中

然后使用navController在主页（FrontPage）设置root

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中使用menuToggle

0
投票

app.component.ts是您应用中呈现的第一件事。您无法导航到它，显然，您无法接收参数。我建议您使用提供程序来存储用户数据，然后从提供程序设置侧边菜单数据。

我不知道你是否理解我...如果你需要更多的帮助，我就在这里。

PS：从构造函数中删除NavParams并且应该可以工作！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.