I have gallery component that updates route when navigate through list of images. If I click info button it opens details for the image to which gallery was instantiated though url in browser is correctly points to another image.
For example, I load gallery having this url: gallery/1 and navigate in gallery to gallery/2 then I click info button that has [route-link]="['Details']" and it opens gallery/1/details when it should be gallery/2/details.
To fix this I explicitly define the id that I need [router-link]="['../Gallery', {id: gs.active?.accessionNumber}, 'Details']" but this is a workaround and I think that there is a bug in route-link directive.
gallery.ts
@Component({ selector: 'stub', template: '' }) class Stub { }
@Component({
selector: 'gallery',
templateUrl: './components/gallery/gallery.html',
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
// BUGFIX: https://github.com/angular/angular/issues/5200
{ path: '/', redirectTo: '/' },
{ path: '/', component: Stub, as: 'Default' },
{ path: '/details', component: Details, as: 'Details' }
])
export class Gallery implements CanReuse, OnReuse {
constructor(
private router: Router,
private gs: GalleryService,
params: RouteParams
) {
if(params.get('id')) this.gs.select(params.get('id'));
}
changeItem(item: IItem) {
this.router.navigate(['../Gallery', { id: item.accessionNumber }]);
}
canReuse() {
return true;
}
onReuse(next: ComponentInstruction) {
this.gs.select(next.params['id']);
}
}gallery.html
<!-- BUGFIX: [router-link]="['Details']" get's first accessionNumber
that was used on component creation and ignores one that is in current browser location -->
<info-button [router-link]="['../Gallery', {id: gs.active?.accessionNumber}, 'Details']"></info-button>
<router-outlet></router-outlet>
I have gallery component that updates route when navigate through list of images. If I click info button it opens details for the image to which gallery was instantiated though url in browser is correctly points to another image.
For example, I load gallery having this url:
gallery/1and navigate in gallery togallery/2then I click info button that has[route-link]="['Details']"and it opensgallery/1/detailswhen it should begallery/2/details.To fix this I explicitly define the id that I need
[router-link]="['../Gallery', {id: gs.active?.accessionNumber}, 'Details']"but this is a workaround and I think that there is a bug inroute-linkdirective.gallery.tsgallery.html