Angular2: доступ к параметрам запроса из URL дает ошибку - PullRequest
Новая
       10

Angular2: доступ к параметрам запроса из URL дает ошибку

0 голосов
/ 05 мая 2018

Пытаюсь извлечь параметры запроса из URL

https://localhost:8080/myapp/shared?id1=2&id2=4

Мне нужно использовать значения id1 и id2 в моем app.component.ts. Я пытаюсь использовать Router, ActivatedRoute, Params from '@angular/router', но когда я запускаю приложение, главная страница не загружается, и я вижу следующую ошибку в консоли браузера: 

Error: StaticInjectorError[t]: 
 StaticInjectorError[t]: 
   NullInjectorError: No provider for t!
Stack trace:


LMZF/</yi</t.prototype.get@http://localhost:8081/myapp/main.a7059837ce4dd4ad4d9f.bundle.js:1:293926
y/<@http://localhost:8081/myapp/main.a7059837ce4dd4ad4d9f.bundle.js:1:237630
y@http://localhost:8081/myapp/main.a7059837ce4dd4ad4d9f.bundle.js:1:237237

А вот как выглядит app.component.ts: 

import { Component, Input, OnInit } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import {Router, ActivatedRoute, Params} from '@angular/router'; //added this import statement

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
  })

export class AppComponent implements OnInit {

constructor(private activatedRoute: ActivatedRoute) {}
// added following code for query params
ngOnInit() {
  // subscribe to router event
 this.activatedRoute.params.subscribe((params: Params) => {
     let userId = params['id1'];
     console.log("parameter is: "+ userId);
    });
}


   title = 'My First Angular App';
}

Дело в том, что я добавил Router код, который вызывает ошибку, даже не загружая вышеуказанный URL. Когда я пытаюсь запустить приложение без кода параметра запроса, оно работает нормально.

Пробовал это решение от этого ответа . Также рассмотрели еще один аналогичный вопрос , но это не помогло.

Может кто-нибудь объяснить, почему это происходит?

UPDATE

Добавлен следующий оператор импорта в app.module.ts: 

imports: [
BrowserModule,
HttpModule,
RouterModule.forRoot([{
            path: '',
            component: AppComponent
        },
])

Теперь это приводит к загрузке приложения, но параметры не извлекаются. Выдает следующую ошибку на консоли браузера: 

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'shared'

ОБНОВЛЕНИЕ 2

Добавление маршрута для соответствующего URL решает проблему с ошибкой консоли, но мой параметр все еще не определен. 

RouterModule.forRoot([{
        path: '',
        component: AppComponent
    },
    {
        path: 'shared',
        component: AppComponent
    },

])

1 Ответ

0 голосов
/ 05 мая 2018

Вы получаете доступ к параметрам маршрута, указанным в модуле маршрутизации, например / user /: uid. Для параметров запроса: 

export class AppComponent implements OnInit {

constructor(private activatedRoute: ActivatedRoute) {}
// added following code for query params
ngOnInit() {
  // subscribe to router event
 this.activatedRoute.queryParams.subscribe((params: Params) => {
     let userId = params['id1'];
     console.log("parameter is: "+ userId);
    });
}

Вы также можете использовать ActivatedRouteSnapshot: 

import { ActivatedRouteSnapshot } from '@angular/router';

export class AppComponent implements OnInit {

constructor(private route: ActivatedRouteSnapshot) {}
// added following code for query params
ngOnInit() {
     console.log("all parameters: ", this.route.queryParamMap.getAll);
}
...