时间戳

首页 > 解决方案 > 如何在 Ionic App 中将参数从一个组件传输到 App 组件

angular - 如何在 Ionic App 中将参数从一个组件传输到 App 组件

问题描述

我正在开发 Ionic 电子商务应用程序，并且正在 Ionic 电子商务应用程序中执行登录，当用户使用凭据登录时，登录后我无法在侧边栏中显示用户名。错误：没有 NavParams 的提供程序。

这是我的 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;
  uname: string;

  pages: Array<{title: string, component: any, name2: string}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public events: Events) {
    this.initializeApp();

    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' },
    ];

    events.subscribe('user:created', (user) => {
    console.log('Welcome', user);
});
  }

  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：

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';
import { MyApp } from './../../app/app.component';

@IonicPage()
@Component({
  selector: 'page-loginpage',
  templateUrl: 'loginpage.html',
})
export class LoginpagePage {
  todo : FormGroup;
  responseData : any;
  userData = {"username": "", "password": ""};
  user: any;
  constructor(public navCtrl: NavController, public navParams: NavParams,
    public restProvider: RestapiProvider, private formBuilder: FormBuilder, private alertCtrl: AlertController, public events: Events) {
      this.todo = this.formBuilder.group({
        username: ['', Validators.required],
        password: ['', Validators.required],
      });
    this.createUser(this.user);
  }
  createUser(user) {
  console.log('User created!')
  this.events.publish('user:created', user);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginpagePage');
  }

    getloginUsers(){
      this.restProvider.getUsers(this.userData, 'user_Login').subscribe((data) => {
        console.log(data);
        if (data) {
          this.responseData = data;
          console.log(this.responseData.msg.name);
          this.user = this.responseData.msg.name;
          if (this.responseData.status === 'success') {
            this.navCtrl.push(MyApp);
          }
          else{
            this.presentAlert();
          }
        }
      });

 }

 presentAlert() {
  let alert = this.alertCtrl.create({
    title: 'Incorrect Username Or Password',
    buttons: ['Dismiss']
  });
  alert.present();
}

 cardpage2()
 {
   this.navCtrl.push(CartPage);
 }
}

我还得出结论，app.component.ts是在您的应用程序中呈现的第一件事。您无法导航到它，显然，您无法接收参数。我必须使用提供程序来存储您的用户数据，然后从提供程序设置您的侧菜单数据，但我对提供程序代码感到困惑。任何帮助深表感谢。

标签： angularionic-framework

解决方案

你的登录功能应该是这样的：

    getloginUsers(){
      this.restProvider.getUsers(this.userData, 'user_Login').subscribe((data) => {
        console.log(data);
        if (data) {
          this.responseData = data;
          console.log(this.responseData.msg.name);
          this.user = this.responseData.msg.name;
          if (this.responseData.status === 'success') {
            this.createUser(this.user);
            this.navCtrl.push(MyApp);
          }
          else{
            this.presentAlert();
          }
        }
      });

 }

试试这个功能作为你的登录。并this.createUser(this.user)从您的constructor. 在你的里面app.component.ts

    this.events.subscribe('user:created', (data) => { // update from login
      console.log(data);
      this.email = data.email;
      this.userName = data.display_name ;
 });

推荐阅读