我创建了一个使用查询参数工作的拉取请求。我会尽力解释我所做的一切。
前面的答案不起作用的原因是因为您根本没有使用路由器。您创建了一个没有路由的大型应用程序组件。为了解决我们需要开始使用路由模块的问题，我还建议您阅读以下两个教程：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 中告诉我们的App Module，以便我们导入新文件并声明新组件。我们还需要更改我们的 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 和来自 @angular/router 的 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();
}
...
}
你可以看到拉取请求here