1

我正在监听组件中的 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);
  }
}
4

0 回答 0