Hi there,
I have a character-details component which displays informations about a
character. I would like to implement a next and a previous button and I'm
not sure if I'm doing right. I understand that if a component needs to be
reused, we need to get url parameters with the params observable property
of ActivitedRoute. So I'm doing things like this :
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, Params } from '@angular/router';
import { CharacterService } from './character.service';
import { ICharacter } from './character';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/switchMap';
@Component({
moduleId: module.id.toString(),
templateUrl: "character-details.component.html",
styleUrls: ["character-details.component.css"]
})
export class CharacterDetailsComponent implements OnInit {
character: ICharacter;
imageWidth: number = 150;
imageHeight: number = 300;
constructor(
private _characterService: CharacterService,
private _route: ActivatedRoute,
private _router: Router
) {}
ngOnInit(): void {
this._route.params
.switchMap((params: Params) =>
this._characterService.getCharacter(params['category'], +params['id']))
.subscribe(
(character: ICharacter) => this.character = character,
error => console.log(error)
);
}
onBack(): void {
this._router.navigate(['../'], {relativeTo: this._route}); //,
{category: this._route.snapshot.params['category']}
}
onNextCharacter(): void {
let category = this._route.snapshot.params['category'];
let id = +this._route.snapshot.params['id'];
this._characterService
.getNextCharacterId(category, id)
.subscribe(
(id: number) => this._router.navigate(['../', id],
{relativeTo: this._route}),
error => console.log(error)
)
}
onPreviousCharacter(): void {
let category = this._route.snapshot.params['category'];
let id = +this._route.snapshot.params['id'];
this._characterService
.getPreviousCharacterId(category, id)
.subscribe(
(id: number) => this._router.navigate(['../', id],
{relativeTo: this._route}),
error => console.log(error)
)
}
}
It's working fine but is it the correct way to implement these
functionalities?
Why can't I simply do the following ?
ngOnInit(): void {
let category = this._route.snapshot.params['category'];
let id = +this._route.snapshot.params['id'];
this._characterService
.getCharacter(category, id)
.subscribe(
(character: ICharacter) => this.character = character,
error => console.log(error)
);
}
Thanks for your time!
Didier
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
