Question

我已经在Angular 2中创建了一个单页抵押贷款计算器应用程序，它对我来说就像一个学习游乐场（试图更习惯于目前在工作中使用的技术堆栈）...它正在http://www.mortgagecalculator123.com运行你想看看它。如果你想看一下，我已经在页面上用Fork Me链接创建了它。

无论如何，我想要做的是，能够直接从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 start 时，我收到以下错误：

aot / app / app.component.ngfactory.ts（45,30）：错误TS2346：提供的参数与呼叫目标的任何签名都不匹配。

谢谢，非常感谢任何帮助。

Answer 1

我使用查询参数工作创建了一个pull请求。我将尝试解释我所做的一切。

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

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

<base href="/">

请参阅here添加该内容的重要性。

然后，由于您使用AppComponent来展示我们创建新组件所需的一切，我们将其称为RootComponent。在index.html更改<my-app>至<root>;它看起来像这样：

<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.module.ts中告诉我们的应用模块，以便我们导入新文件并声明新组件。我们还需要更改我们的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 {
}

现在有了所有这些，我们现在终于可以开始将参数传递到我们的应用，AppComponent从{{1}导入Router，ActivatedRoute和Params 1}}所以你的@angular/router看起来像这样：

AppComponent

您可以看到提取请求here

Answer 2

您似乎正在处理 Queryparams 。因此，要访问它们，您可以尝试以下代码，

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

Angular 2 - 如何传递URL参数？

2 个答案: