Angular 2 - How to pass URL parameters?

Question

Angular 2 - How to pass URL parameters?

I created an application for calculating bookmarks on one page in Angular 2, which acts as a learning platform for me (trying to get used to the technology stack that is currently used at work) ... It works on http://www.mortgagecalculator123.com if you want to look at it. I made it open source using the Fork Me link right on the page if you want to look at it.

Anyway, what I want to do is the ability to transfer variables to my application directly from the URL so that they can be used by my Angular 2 application. Something like this: http://www.mortgagecalculator123.com /? var1 = ABC & var2 = DEF

I tried following, in my app.component.ts, I added the following:

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

But this will not work, when I run npm start , I get the following error:

aot / app / app.component.ngfactory.ts (45.30): error TS2346: The supplied parameters do not match any signature of the target call.

Thanks, any help would be greatly appreciated.

+15

javascript node.js angular npm

jjj Oct 4 '16 at 17:34

source share

2 answers

It seems you are dealing with Queryparams . Therefore, to access them, you can try under the code,

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

0

micronyks Oct 4 '16 at 18:12

source share

Fabio antunes · Accepted Answer · 2016-10-07T10:48:29+0000

I created a transfer request with working request parameters. I will try to explain everything that I have done.

The reason the previous answers don't work is because you are not using a router at all. You have created a massive application component with no routes. To fix this, we need to start using the route module, I also advise you to read these two tutorials: Routing and Routing and Navigation .

First we need to change your index.html , add it to our <head> :

 <base href="/">

See here why it is important to add this.

Then, since you are using AppComponent to show all we need, create a needs component, which we will call RootComponent . On index.html replace <my-app> with <root> ; it will look like this:

 <root>Loading...</root>

Now in your app folder we need to create two files, the first of which will be root.component.ts , which will look like this:

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

See that we have <router-outlet></router-outlet> as a template, Angular will introduce our components based on the route.

We still need to create another file, which will be main.route.ts , it looks like this:

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

In this file we say that for our base route we want to display our AppComponent

We created our new files, now we need to inform our App Module about them in your app.module.ts so that we import new files and declare a new component. We also need to modify our boostrap component:

 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 { }

Now, with all this in place, we can now finally start passing parameters in our application, import Router , ActivatedRoute and Params from @angular/router AppComponent so that your AppComponent looks something like this:

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

You can see the pull request here

Angular 2 - How to pass URL parameters?

More articles: