web-dev-qa-db-fra.com

Angular 2 - Comment passer des paramètres d'URL?

J'ai créé une application de calculateur d'hypothèque d'une seule page dans Angular 2, qui constitue pour moi un terrain de jeu pour l'apprentissage (en essayant de m'habituer davantage à la pile technologique actuellement utilisée au travail) ... http://www.mortgagecalculator123.com Si vous voulez l'examiner, je l'ai ouvert en source ouverte avec un lien Fork Me directement sur la page si vous souhaitez l'examiner.

Quoi qu'il en soit, ce que je veux faire, c'est pouvoir passer des variables à mon application, directement à partir de l'URL, afin qu'elles puissent être consommées par mon Angular angulaire $ 2. Quelque chose comme ça: - http://www.mortgagecalculator123.com/?var1=ABC&var2=DEF

J'ai essayé de suivre, dans mon app.component.ts, j'ai ajouté ce qui suit:

import { Router, ActivatedRoute, Params } from '@angular/router';

AppComponent {
private var1: string;
private var2: string;

constructor(
  private route: ActivatedRoute,
  private router: Router
  ) {}

ngOnInit() {
  this.route.params.forEach((params: Params) => {
      this.var1 = params['var1'];
      this.var2 = params['var2'];
  });

  console.log(this.var1, this.var2);
}
...
}

Mais cela ne fonctionnera pas. Lorsque j'exécute npm start , le message d'erreur suivant s'affiche:

aot/app/app.component.ngfactory.ts (45,30): erreur TS2346: Les paramètres fournis ne correspondent à aucune signature de la cible de l'appel.

enter image description here

Merci, toute aide serait très appréciée.

javascriptnode.jsangularnpm
21
jjj

J'ai créé une demande d'extraction avec les paramètres de requête actifs. Je vais essayer d'expliquer tout ce que j'ai fait.

La raison pour laquelle les réponses précédentes ne fonctionnent pas, c'est que vous n'utilisez pas du tout le routeur. Vous avez créé un composant d'application massif sans itinéraires. Pour résoudre ce problème, nous devons commencer à utiliser le module route. Je vous conseille également de lire ces deux tutoriels: Routing et Routing & Navigation .

Nous devons d’abord changer votre index.html, ajoutez ceci à votre <head>:

<base href="/">

Voir ici pourquoi il est important d'ajouter cela.

Ensuite, puisque vous utilisez votre AppComponent pour montrer tout ce dont nous avons besoin pour créer un nouveau composant, nous appellerons RootComponent. Sur ton index.html changement <my-app> à <root>; Il ressemblera à ceci:

<root>Loading...</root>

Maintenant, dans votre dossier app, nous devons créer deux fichiers. Le premier sera root.component.ts qui ressemblera à ceci:

import { Component } from '@angular/core';

@Component({
  selector: 'root',
  template: `<router-outlet></router-outlet>`,
})
export class RootComponent {
  constructor() {  }
}

Regardez que nous avons le <router-outlet></router-outlet> comme modèle, Angular injectera nos composants en fonction de la route.

Nous avons encore besoin de créer un fichier de plus, qui sera main.route.ts, voici à quoi ça ressemble:

import { Routes, RouterModule }   from '@angular/router';
import { AppComponent } from './app.component';

export const mainRoutes: Routes = [
  { path: '', component: AppComponent }
];
export const mainRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(mainRoutes);

Dans ce fichier, nous disons que pour notre route de base, nous voulons rendre notre AppComponent

Nous avons créé nos nouveaux fichiers, nous devons maintenant en parler à notre module d'application , dans votre app.module.ts nous importons donc les nouveaux fichiers et déclarons le nouveau composant. Nous devons également changer notre composant boostrap:

import {NgModule}      from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {AppComponent}  from './app.component';
import {RootComponent}  from './root.component'; // we import our new RootComponent
import {ChartModule} from 'primeng/primeng';
import {TooltipModule} from 'primeng/primeng';
import { routing, mainRoutingProviders } from './main.routes'; // We also import our Routes

@NgModule({
  imports: [
    BrowserModule,
    ChartModule,
    FormsModule,
    mainRoutingProviders, // we also need to import our route provider into the module
    ReactiveFormsModule,
    routing, // and also import our routes declarations
    TooltipModule
  ],
  declarations: [AppComponent, RootComponent], // we declare our new RootCpmponent
  bootstrap: [RootComponent] // Notice that we are now using our RootComponent to bootstrap our app
})
export class AppModule {
}

Maintenant, avec tout cela en place, nous pouvons enfin commencer à passer des paramètres à notre application, sur votre AppComponent importer le Router, ActivatedRoute et le Params de @angular/router donc votre AppComponent ressemblera à ceci:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

export class AppComponent implements OnInit, OnDestroy {
  private var1: string;
  private var2: string;
  private sub: Subscription;

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit() {
    // assign the subscription to a variable so we can unsubscribe to prevent memory leaks
    this.sub = this.route.queryParams.subscribe((params: Params) => {
      this.var1 = params['var1'];
      this.var2 = params['var2'];
      console.log(this.var1, this.var2);
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
...
}

Vous pouvez voir la demande de tirage ici

50
Fabio Antunes

Il semble que vous ayez affaire à Queryparams. Donc, pour y accéder, vous pouvez essayer ci-dessous le code,

this.var1= this.route
      .queryParams
      .map(params => params['var1']);
0
micronyks