Angular 在Ionic app中将navparams从一个组件传递到应用组件时显示错误

我正在爱奥尼亚电子商务应用程序中执行登录，当用户使用凭据登录时，我无法在登录后的侧边栏中显示用户的姓名错误：没有NavParams的提供程序

这是我的登录页面.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>

问题是，登录后，我无法在侧边栏中显示用户名和注销按钮，因为它显示了错误

这是我的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>

欢迎{{这个？.uname}}
登录/注册
注销
{{p.title}}

在这个侧边栏中，我在用户登录后显示用户名和注销按钮，但它显示了错误

这是我的app.component.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);
 }
 }

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();
  }
}

从“/../pages/front/front”导入{FrontPage}；
从“@angular/core”导入{Component，ViewChild}；
从“离子角度”导入{Nav，平台，NavController，NavParams}；
从'@ionic native/status bar'导入{StatusBar}；
从'@ionic native/SplashScreen'导入{SplashScreen}；
从“../pages/home/home”导入{HomePage}；
从“../pages/list/list”导入{ListPage}；
从“../pages/product/product”导入{ProductPage}；
从“../pages/loginpage/loginpage”导入{LoginpagePage}；
@组成部分({
templateUrl:'app.html'
})
导出类MyApp{
@ViewChild（导航）导航：导航；
menuclick:boolean=true；
menuclick2：布尔值=false；
rootPage:any=FrontPage；
页面：数组；
构造函数（公共平台：平台，公共状态栏：状态栏，公共splashScreen:splashScreen，公共navParams:navParams）{
这是.initializeApp（）；
this.uname=this.navParams.get（'param1'）；
//用于ngFor和导航的示例
此页=[
{标题：“主页”，组件：FrontPage，名称2:“主页”}，
{标题：“产品类别”，组件：ProductPage，名称2:“篮子”}，
{标题：'商品'，组件：ProductPage，名称2:'人'}，
{标题：“我的订单”，组件：ProductPage，名称2:“购物车”}，
];
}
初始化EAPP（）{
this.platform.ready（）。然后（（）=>{
this.statusBar.styleDefault（）；
这个.splashScreen.hide（）；
});
}
openPage（第页）{
this.nav.setRoot（page.component）；
}
loginpage2（）
{
此.nav.push（登录页面）；
}
logoutClicked（）{
控制台日志（“注销”）；
this.nav.pop（）；
}
}

---

我已将用户名从loginpage.ts传递到app.component.ts，但它显示了错误。错误：没有NavParams的提供程序。非常感谢您的帮助。

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

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

---

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

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

public getUsername(){
  if(window.localStorage.getItem("username"))
    return window.localStorage.getItem("username");
}

登录后，您需要将用户名保存在本地存储器中

window.localStorage.setItem（“用户名”，this.responseData.msg.name）

然后使用navController在主页（FrontPage）设置根目录

然后在app.component.ts中，您需要一个函数返回保存在本地存储器中的用户名

public getUsername(){
  if(window.localStorage.getItem("username"))
    return window.localStorage.getItem("username");
}

然后，在您的app.html上，您将更改为

<h1 class="mymenuh2">Welcome {{getUsername()}}</h1>

欢迎{{getUsername（）}

这应该行得通

但是请记住，您需要在FrontPage中进行菜单切换。记住，有很多方法可以实现这一点，这只是一个简单的示例