Angular2 - queryParam更改已执行但未反映在Safari + IE11中

Question

我正在侦听组件中的queryParam更改，以便更新并保存活动行的状态。单击行突出显示一行，使用浏览器后退按钮标记prev。行作为活动。到现在为止还挺好。但接下来是IE11和Safari。

当我在IE 11或Safari中使用浏览器后退按钮时，我的组件中的代码会被执行，但不会反映在DOM中。当我在NgZone.run（回调）回调函数中运行更改时，它会得到反映。

Here's the 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);
  }
}