Ответ 1
Я создал запрос на перенос с работающими параметрами запроса. Я попытаюсь объяснить все, что я сделал.
Причина, по которой предыдущие ответы не работают, заключается в том, что вы вообще не используете маршрутизатор. Вы создали массивный компонент приложения без маршрутов. Чтобы исправить это, нам нужно начать использовать модуль маршрута, я также советую вам прочитать эти два учебника: Маршрутизация и Маршрутизация и Навигация.
Сначала нам нужно изменить ваш 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 о них в вашем 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();
}
...
}
Вы можете посмотреть запрос на тягу здесь