Description:
I'm following the angular2 tutorial and I was confused when the window.history.back()
was not working correctly. Some information gets "lost" in a sense.
In the following three images you'll see the following:
- Image showing a list of top heroes. I will click on "Narco"
- Image showing the hero Narco in detail, I will click on the "Back" button.
- Image showing the hero list again, but this time empty. (The hero list gets "filled" if I click "
Dashboard
" again.)
Image 1:
Image above shows a list of top heroes.
Image 2:
Image above shows the hero Narco in detail.
Image 3:
Image above showing an empty list of top heroes after pressing back in the previous image.
Code for the Hero Detail:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HeroService } from './hero.service';
import {Hero} from "./hero";
import {Location} from '@angular/common';
@Component({
selector: 'my-hero-detail',
templateUrl: 'app/hero-detail.component.html',
styleUrls: ['app/hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit, OnDestroy{
hero: Hero;
sub: any;
constructor( private _location: Location, private heroService: HeroService, private route: ActivatedRoute){}
ngOnInit():any {
this.sub = this.route.params.subscribe(params =>{
let id = +params['id'];
this.heroService.getHero(id).then(hero => this.hero = hero)
})
}
ngOnDestroy():any {
this.sub.unsubscribe();
}
goBack(){
//Not working
this._location.back();
//Also tried with window.history.back();
}
}
Question:
Why does the "Back" button not work in Safari? I tried this in Chrome without a problem. Is there a work around for it to work in Safari?