javascript - Angular2 - queryParam の変更は実行されますが、Safari + IE11 には反映されません。

Question

アクティブな行の状態を更新して保存するために、コンポーネントで queryParam の変更をリッスンしています。行をクリックするとその行が強調表示され、ブラウザの戻るボタンを使用すると前の行がマークされます。行をアクティブにします。ここまでは順調ですね。しかし、IE11 と Safari があります。

IE 11 または Safari でブラウザの [戻る] ボタンを使用すると、コンポーネントのコードが実行されますが、DOM には反映されません。NgZone.run(callback) コールバック関数内で変更を実行すると、反映されます。

動作を再現するPlunkは次のとおりです。

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);
  }
}