0

Есть сервис, который получает массив items через http запрос, url вида /items, либо один item - соответственно, url вида /items/<id>. Вывожу items на страницу через component Items путем перебора в цикле *ngFor, но как лучше сделать просмотр подробной информации об item - визуально на новой странице с перезагрузкой страницы или без перезагрузки.

Предположим, в списке items делаю для каждого item ссылку перехода на страницу просмотра, ссылка вида /items/<id>, посредством маршрутизации переадресую обработку компоненту ItemsId, который использует общий для Items и ItemsId сервис ItemsService

А как получить тот самый id и передать его в нужное место внутри класса в компоненте для последующего вызова метода сервиса? Если я правильно понимаю, в любом случае необходимо завести некое поле id для хранения этого идентификатора, но в какой момент его заполнять?

Update: Маршрутизатор переадресует обработку url вида /items/21 на нужный компонент ItemsIdComponent, однако значение id=21 пока не удалось получить в классе ItemsIdComponent.

app.routes.ts

import { ItemsIdComponent } from "./components/items/items-id.component";
...
export const routes: Routes =[
 ...
  { path: 'items/:id', component: ItemsIdComponent},
 ...
];
export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(routes);

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule} from '@angular/http';    
...
import { ItemsIdComponent } from './components/items/items-id.component';
import { routing, appRoutingProviders } from './app.routes';
import { ItemsService } from "./components/items/items.service";

@NgModule({
  declarations: [
   ...
   ItemsIdComponent
 ],
  imports: [
    ...
    HttpModule,
    routing,
    ...
  ],
  providers: [
    appRoutingProviders,
    ...
    ItemsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

items-id.component.ts

import { Component, OnInit } from "@angular/core";
//import { Router } from "@angular/router";
import { ItemsService } from "./items.service";
import { Item } from "./items";
import {ActivatedRoute} from "@angular/router";

@Component({
  moduleId: module.id,
  selector: "items-id",
  templateUrl: "items-id.component.html",
  styleUrls: ["items-id.component.scss"]
})
export class ItemsIdComponent implements OnInit {
  item: Item;
  id:number;
  errorMessage: string;

  constructor( private service: ItemsService,
              /* private router: Router, */ 
              private activatedRoute: ActivatedRoute) {
    this.id = +this.activatedRoute.snapshot.queryParams['id'];    
 console.log('id='+this.id+'route='+this.activatedRoute.snapshot.queryParams['id']);
  }

  ngOnInit() {
  }

  private getItem(id) {
    this.service.getItem(id).then(
      item=> this.item = item,
      error => this.errorMessage = error
    );
  }
}
3
  • 1
    Я опечатался в ответе, вместо queryParams надо params. Посмотрите обновленный ответ. 25 окт 2017 в 15:29
  • @StepanKasyanenko спасибо большое, получилось. А объясните, пожалуйста, в чем разница между queryParams и params? queryParams это случайно не для передачи параметров вроде /items?id=21&name=qwerty ?
    – Emm
    25 окт 2017 в 16:03
  • 1
    Да, вы абсолютно правы queryParams это для передачи параметров вроде /items?id=21&name=qwerty 25 окт 2017 в 16:43

1 ответ 1

1

Получить параметр из url можно с помощью ActivatedRoute.

import {Component,  OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router"; // делаем импорт

@Component({
selector: 'app-sound-maker',
templateUrl: './sound-maker.component.html',
styleUrls: ['./sound-maker.component.scss'],
})
export class ItemComponent implements OnInit {
  public id:number;// поле для сохранения id
  constructor(private activatedRoute: ActivatedRoute) { // инициализируем экземпляр класса ActivatedRoute
     //Получаем id из url. 
     //Url вида ...item/21, где 21 - это id. 
     //В роутинге должно быть прописано так item/:id         
     this.id = +this.activatedRoute.snapshot.params['id']; 

  }
}
3
  • роутинг срабатывает на items/:id, переходит при ссылке вида /items/21 к нужному компоненту, однако id таким образом не получает, значение Nan
    – Emm
    25 окт 2017 в 10:12
  • this.activatedRoute.snapshot.queryParams['id'] - undefined
    – Emm
    25 окт 2017 в 10:19
  • @Emm Обновляйте вопрос, показывайте код, что и как сделали) 25 окт 2017 в 11:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.