Hi there,
I have a character-details component and I would like to implement previous
and back buttons to switch over characters. I have implemented 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 this the correct way to do? I don't fully get the
use of switchMap. I understand that, as this._route.params is an
observable, and that the character-details will be reused, I can subscribe
to the observable to get the data. But what if I implement ngOnInit like
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)
);
}
Can I use this._route.snapshot even if the component will be reused? And
how do I know that it is actually reused?
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.
