Angular 2 – 如何传递URL参数？
我已经在Angular 2中创build了一个单页面抵押计算器应用程序，这对我来说就像是一个学习游乐场（试图更习惯当前在工作中使用的技术堆栈）…它运行在http://www.mortgagecalculator123.com如果你想看看它。 如果您想查看，我已经在页面上使用Fork Me链接开源。
无论如何，我想要做的是能够将variables传递给我的应用程序，直接从URL，所以他们可以被我的Angular 2应用程序使用。 就像这样： http : //www.mortgagecalculator123.com/? var1=ABC&var2 =DEF
我试过以下，在我的app.component.ts中，我添加了以下内容：
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); } ... } 但是，这不会工作，当我运行npm开始 ，我得到以下错误：
aot / app / app.component.ngfactory.ts（45,30）：错误TS2346：提供的参数不匹配调用目标的任何签名。
谢谢，任何帮助将不胜感激。
我创build了查询参数工作的拉请求。 我会尽力解释我所做的一切。
以前的答案不工作的原因是因为你根本没有使用路由器。 您创build了一个没有路由的大型应用程序组 为了解决这个问题，我们需要开始使用路由模块，我还build议您阅读这两个教程： 路由和路由与导航 。
首先，我们需要改变你的index.html ，把它添加到你的<head> ：
<base href="/">
看看为什么添加这个很重要。
然后，因为您正在使用您的AppComponent来显示我们需要创build一个需要组件，我们将调用RootComponent 。 在你的index.html用<root>replace<my-app> <root> ; 它会看起来像这样：
<root>Loading...</root>
现在在你的app文件夹中，我们需要创build两个文件，第一个将会是root.component.ts ，如下所示：
import { Component } from '@angular/core'; @Component({ selector: 'root', template: `<router-outlet></router-outlet>`, }) export class RootComponent { constructor() { } }
看看我们有<router-outlet></router-outlet>作为模板，Angular会根据路由注入我们的组件。
我们仍然需要创build一个文件，这将是main.route.ts ，这是它的样子：
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);
在这个文件中，我们说我们的基础路线，我们要渲染我们的AppComponent
我们已经创build了我们的新文件，现在我们需要告诉我们的应用程序模块关于它们，在你的app.module.ts所以我们导入新的文件并声明新的组件。 我们还需要改变我们的助推器组件：
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 { }
现在，我们现在终于可以开始传递参数给我们的应用程序，在你的AppComponent上从@angular/router导入Router ， ActivatedRoute和Params ，这样你的AppComponent看起来就像这样：
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(); } ... }
你可以在这里看到拉请求
看来你正在处理Queryparams 。 所以要访问它们，你可以尝试下面的代码，
this.var1= this.route .queryParams .map(params => params['var1']);