我在查询参数正常工作的情况下创建了请求请求。我将尽力解释我所做的一切。
前面的答案不起作用的原因是，您根本没有使用路由器。您创建了没有路线的庞大应用程序组件。为了解决我们需要开始使用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 RootComponentimport {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(); }...}你可以在这里看到拉取请求
