1

I'm listening to queryParam changes in a component in order to update and save the state of an active row. Clicking on the rows highlights the one, using the browser back button marks the prev. row as active. So far so good. But then there's IE11 and Safari.

When I'm using the browser back button in IE 11 or Safari the code in my component get's executed, but not reflected in the DOM. When I run the changes inside the NgZone.run(callback) callback function, it get's reflected.

Here's the Plunk which reproduces the behaviour:

import {Component} from '@angular/core'
import { Http, Response } from '@angular/http';
import {Router, ROUTER_DIRECTIVES} from '@angular/router';

@Component({
  selector: 'list-component',
  styles: [`
    .isActive {
      background: gray;
    }
  `],
  template: `
    <div class="debuggerBox">
      Selected row index: {{ selectedIndex || 'none' }}
      <br>
      <div>Selected Item: {{ itemDetail | json }}</div>
    </div>
    <ul>
      <li *ngFor="let item of listData; let i = index"
          [class.isActive]="selectedIndex == item.index">
        <a [routerLink]="['/']" [queryParams]="{selectedIndex: item.index}">Index {{item.index}}, Name {{item.name}}</a><br>
      </li>
    </ul> 
  `,
  directives: [ROUTER_DIRECTIVES]
})
export class ListComponent {
  listData: any = [
    {index: 0, name: 'Item #0'},
    {index: 1, name: 'Item #1'},
    {index: 2, name: 'Item #2'},
    {index: 3, name: 'Item #3'},
    {index: 4, name: 'Item #4'}
  ];

  selectedIndex: number;
  itemDetail: any = {};

  constructor(private http: Http, private router: Router) {
  }

  ngOnInit() {
    this.router.routerState.queryParams.subscribe(params => {
      if (params.hasOwnProperty('selectedIndex')) {
        console.log('queryParams.selectedIndex change detected');

        this.selectedIndex = params['selectedIndex'];
        this.loadItemDetail(this.selectedIndex);
      }
    });
  }

  loadItemDetail(index) {
    console.log('load item #' + index);
    this.itemDetail = {};
    this.itemDetail = this.listData[index];
    console.log('loaded item #' + index);
  }
}
jowe
  • 181
  • 1
  • 5

0 Answers0