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

15

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

Изображение 31195

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

Теги:
angular
npm

2 ответа

38
Лучший ответ

Я создал запрос на перенос с работающими параметрами запроса. Я попытаюсь объяснить все, что я сделал.

Причина, по которой предыдущие ответы не работают, заключается в том, что вы вообще не используете маршрутизатор. Вы создали массивный компонент приложения без маршрутов. Чтобы исправить это, нам нужно начать использовать модуль маршрута, я также советую вам прочитать эти два учебника: Маршрутизация и Маршрутизация и Навигация.

Сначала нам нужно изменить ваш 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();
  }
...
}

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

Поделиться
  • 1
    Фабио, это именно то, что я пытался выяснить все время. Огромное спасибо. Я все еще новичок, когда дело доходит до Angular 2, поэтому большое спасибо за то, что потратили ваше драгоценное время, чтобы все объяснить. Мало того, что это работает сейчас, но это было отличное учебное упражнение, следуя изложенной вами логике. Хорошо заслужил 50 баллов за репутацию.
  • 0
    @jjj Не за что. Я рад, что это помогло.
Показать ещё 12 комментариев
0

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

this.var1= this.route
      .queryParams
      .map(params => params['var1']);
Поделиться
  • 0
    Когда я это делаю, я получаю следующие ошибки: aot / app / app.component.ngfactory.ts (45,30): ошибка TS2346: предоставленные параметры не соответствуют ни одной сигнатуре цели вызова. app / app.component.ts (90,39): ошибка TS2339: свойство 'map' не существует для типа 'Observable <{[key: string]: any; }>».
  • 0
    Я пытался использовать: import 'rxjs / add / operator / map'; но затем я возвращаюсь к исходной ошибке TS2346: предоставленные параметры не совпадают ни с одной сигнатурой цели вызова. Сумасшедший, как что-то простое, как прохождение варов может быть так сложно ...
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню