4
votes

Aucune erreur de fournisseur pour NavParams ne vient dans l'application Ionic

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


6 commentaires

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,


7 Réponses :


2
votes

Avez-vous importé le module angulaire ionique dans votre @NgModule?

 imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {

    })
  ],


2 commentaires

importations: [IonicModule.forRoot (MyApp),], je l'ai importé dans app.module.ts.


Dois-je également importer le composant de connexion?



5
votes

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]
})


10 commentaires

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.



1
votes

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


0 commentaires

4
votes

J'ai trouvé une solution Au lieu d'ajouter navParams dans constructor

Ajoutez public navParams = new NavParams

Par exemple

< pré> XXX


0 commentaires

4
votes

J'ai eu le même problème, j'ai dû faire deux choses pour le résoudre:

  • Supprimez l'entrée de route modale du fichier app-routing-module.ts
  • mettez à jour l'entrée suivante dans le module Modal comme ceci:
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 {}


0 commentaires

2
votes

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"];
    });
}


1 commentaires

Merci pour la réponse.



2
votes

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


0 commentaires