角度2-如何传递URL参数？

一尘不染

角度2-如何传递URL参数？

node.js

我已经在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：提供的参数与调用目标的任何签名都不匹配。

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

阅读 249

2020-07-07

共1个答案

一尘不染

我在查询参数正常工作的情况下创建了请求请求。我将尽力解释我所做的一切。

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

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

<base href="/">

看到这里为什么添加它很重要。

然后，由于您正在使用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进口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();
  }
...
}

你可以在这里看到拉取请求

2020-07-07