Je transfère les paramètres d'un composant vers app.component.ts mais l'erreur vient. Erreur: aucun fournisseur pour NavParams.
Ceci est mon 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"; 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); } }
Dans ce composant, je reçois le navparam valeur comme celle-ci this.uname = this.navParams.get ('param1');
Ceci est ma page de connexion.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(); } }
7 Réponses :
Avez-vous importé le module angulaire ionique dans votre @NgModule?
imports: [ BrowserModule, IonicModule.forRoot(MyApp, { }) ],
importations: [IonicModule.forRoot (MyApp),], je l'ai importé dans app.module.ts.
Dois-je également importer le composant de connexion?
Pouvez-vous s'il vous plaît essayer d'ajouter. J'espère que cela pourrait fonctionner. Si vous me fournissez un projet, je peux mieux vous aider.
@Component({ selector: 'page-loginpage', templateUrl: 'loginpage.html', providers: [NavParams] })
est-ce que cela aide?
Erreur. Argument de type '{selector: string; templateUrl: chaîne; fournisseur: (typeof NavParams) []; } 'n'est pas attribuable au paramètre de type' Component '. Le littéral d'objet ne peut spécifier que des propriétés connues, mais 'provider' n'existe pas dans le type 'Component'. Vouliez-vous écrire «fournisseurs»? [2345]
Dois-je fournir mon identifiant anydesk.
Je pense que ce devrait être les fournisseurs.
Après l'avoir ajouté, il affiche une erreur. Impossible de résoudre tous les paramètres de NavParams: (?).
veuillez me fournir tout le projet. pour que je puisse résoudre
continuons cette discussion dans le chat .
Comment fournir le projet complet? Sur github, tout ira bien.
D'accord. Merci beaucoup.
L'interaction se situe entre la page de connexion et l'app.component.ts.
J'ai conclu que l'app.component.ts est la première chose rendue dans votre application. Vous ne pouvez pas y accéder, évidemment, vous ne pouvez pas recevoir de paramètres.
La première solution est la suivante: je dois utiliser un fournisseur pour stocker vos données utilisateur, puis définir votre camp données de menu du fournisseur.
La deuxième solution est la suivante: Utiliser les événements comme ci-dessous.
En utilisant les événements, j'ai résolu mon problème et mon le code d'événement fonctionne correctement.
import { Events } from 'ionic-angular'; // first page (publish an event when a user is created) constructor(public events: Events) {} createUser(user) { console.log('User created!') this.events.publish('user:created', user, Date.now()); } // second page (listen for the user created event after function is called) constructor(public events: Events) { events.subscribe('user:created', (user, time) => { // user and time are the same arguments passed in `events.publish(user, time)` console.log('Welcome', user, 'at', time); }); }
J'ai trouvé une solution
Au lieu d'ajouter navParams
dans constructor
Ajoutez public navParams = new NavParams
Par exemple
< pré> XXXJ'ai eu le même problème, j'ai dû faire deux choses pour le résoudre:
ionViewWillEnter() { this.selectedItem = this.navParams.get('selectedItem'); console.log(this.selectedItem); }
Avec ces deux changements, j'ai pu utiliser navParams comme ceci dans le fichier de Modal ts:
@NgModule({ imports: [ CommonModule, FormsModule, IonicModule ], declarations: [DetailsPage], entryComponents:[DetailsPage] }) export class DetailsPageModule {}
Le paramètre de requête est simplement récupéré à l'aide de l'interface ActivatedRoute
depuis '@angular/router'
:
public constructor(private route: ActivatedRoute) { this.route.queryParams.subscribe(params => { this.firstname = params["param1"]; }); }
Merci pour la réponse.
J'utilise cette variante
constructor(private router: Router) { const state = this.router.getCurrentNavigation().extras.state if (state) { this.phone = state.phone; this.verificationId = state.verificationId; } }
et dans la page suivante
const params = { phone, verificationId, }; this.navCtrl.navigateForward("/forward-page", { state: params });
fonctionne très bien
Cette erreur se produit souvent lorsque vous n'avez pas fourni le service dans un tableau de fournisseur. S'il vous plaît vérifier le
@AnkurShah. fournisseurs: [NavParams], j'ai ajouté ceci dans le app.module.ts.
@AnkurShah. Pouvez-vous s'il vous plaît fournir la réponse à cela. S'il vous plaît.
@AnkurShah. Après l'importation, cette erreur arrive. Impossible de résoudre tous les paramètres de NavParams: (?).
@Ragav Pouvez-vous s'il vous plaît fournir l'exemple de projet source qui vous donne une erreur
En cela, lorsque j'essaie de transmettre la valeur de loginpage.ts à App.component.ts, cela donne l'erreur ci-dessus. param1: this.responseData.msg.name,