1

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:

  1. Image showing a list of top heroes. I will click on "Narco"
  2. Image showing the hero Narco in detail, I will click on the "Back" button.
  3. Image showing the hero list again, but this time empty. (The hero list gets "filled" if I click "Dashboard" again.)

Image 1: list of top heroes Image above shows a list of top heroes.


Image 2:

hero narco

Image above shows the hero Narco in detail.


Image 3: list of empty heroes 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?

kemicofa ghost
  • 16,349
  • 8
  • 82
  • 131

1 Answers1

1

This is a known bug in Angular and will be fixed in 2.0-rc5 (bugfix is already in master). (https://github.com/angular/angular/commit/f08060b0b00c98341c7e1fd9acb984402c280396)

So far you can trigger change detection manually:

constructor(protected ref: ChangeDetectorRef)
    {

    }

    protected change()
    {
            this.ref.detectChanges();
    }
Nilz11
  • 1,242
  • 14
  • 16
  • Thanks for the answer. Could you be a bit more specific on how to implement the ChangeDetectorRef please? – kemicofa ghost Jul 27 '16 at 12:17
  • See here, the top comment answers already all possibilities: http://stackoverflow.com/questions/34827334/triggering-angular2-change-detection-manually, probably easier would be to update to latest angular router. – Nilz11 Jul 27 '16 at 12:28