Angular 2 - Как передать параметры URL?

Я создал приложение для калькуляции закладок на одну страницу в 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: Поставляемые параметры не соответствуют какой-либо сигнатуре целевого вызова.

Спасибо, любая помощь будет очень признательна.

Ответ 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();
  }
...
}

Вы можете посмотреть запрос на тягу здесь

Ответ 2

Кажется, вы имеете дело с Queryparams. Поэтому для доступа к ним вы можете попробовать под кодом,

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