Angular 2 - 如何传递URL参数？

我在Angular 2中创建了一个页面抵押计算器应用程序，它对我来说就像是一个学习游乐场（试图更习惯于当前在工作中使用的技术堆栈）......它运行于http://www.mortgagecalculator123.com如果您想查看它。如果您想查看，我已经在页面上使用Fork Me链接开源。Angular 2 - 如何传递URL参数？

无论如何，我想要做的是能够直接从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：提供的参数不匹配调用目标的任何签名。

谢谢，任何帮助，将不胜感激。

来源

2016-10-04 jjj

我创建了一个查询参数工作的拉请求。我会尽力解释我所做的一切。

以前的答案不起作用的原因是因为你根本没有使用路由器。您创建了一个没有路由的大型应用组件。为了解决这个问题，我们需要开始使用路由模块，我还建议您阅读这两个教程：Routing和Routing & Navigation。

首先，我们需要改变你的index.html，添加到您的<head>：

<base href="/">

见here为什么要补充一点，这一点很重要。

然后，因为您正在使用您的AppComponent来显示创建需要组件的所有内容，我们将其称为RootComponent。在你的index.html上用<root>替代<my-app>;它看起来就像这样：

<root>Loading...</root>

现在你app文件夹内，我们需要创建两个文件，第一个将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会根据路线注入我们的组件。

我们仍然需要再创建一个文件，这将是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

我们已经创建了新的文件，现在我们需要告诉我们的APP模块他们，在你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进口Router，ActivatedRoute和Params从@angular/router所以你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(); 
    } 
... 
}

你可以看到拉入请求here

来源

2016-10-07 10:48:29

法比奥，这正是我试图弄清楚整个时间。非常感谢。对于Angular 2，我仍然是一个新手，所以非常感谢您花费宝贵的时间来解释一切。它不仅现在可以工作，而且按照您所概述的逻辑进行了很好的学习练习。信誉得到50分。 – jjj

@jjj你很受欢迎。我很高兴它有帮助。 –

还有一个问题....在app.component.ts，是否需要保持：'私人路由器：路由器'，在65线？看起来这是一个未使用的参数不是？ – jjj

看来你正在处理Queryparams。所以要访问它们，你可以尝试下面的代码，

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

来源

2016-10-04 18:12:11 micronyks

当我这样做，我收到以下错误： aot/app/app.component.ngfactory.ts（45,30）：错误TS2346：提供的参数不匹配调用目标的任何签名。 app/app.component.ts（90,39）：错误TS2339：属性'map'在类型'Observable <{[key：string]：any; }>”。 – jjj

我试过使用：import'rxjs/add/operator/map';但后来我回到原始错误TS2346：提供的参数不匹配调用目标的任何签名。疯狂如何简单的传球变得如此复杂... – jjj

现在没有任何意义可以帮我解决了。 – micronyks

Angular 2 - 如何传递URL参数？

回答

相关问题