我正在将参数从一个组件传输到app.component.ts,但是错误即将来临。错误:没有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 navParams: NavParams
) {
this.initializeApp();
this.uname = this.navParams.get("param1");
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();
}
}
在此组件中,我将获得如下的navparam值this.uname = this.navParams.get('param1');这是我的 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: "" };
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;
console.log(this.responseData.msg.name);
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);
}
}
错误:没有NavParams提供程序。任何帮助深表感谢。 最佳答案
我找到了解决方案
而不是在navParams
中添加constructor
添加public navParams = new NavParams
例如
export class LoginpagePage {
public navParams = new NavParams();
todo: FormGroup;
responseData: any;
userData = { username: "", password: "" };
constructor(public navCtrl: NavController) {};
}