IE不会调用生命周期挂钩或填充@Input直到检测到更改？

Question

我正在使用beta.0，因为此突出的错误阻止了angular 2在beta.1和beta.2中的IE中工作。

SearchBar.ts中的相关代码

@Component({
  selector : 'search-bar',
  templateUrl: 'views/searchbar.html'
})
export class SearchBar {
  private history: SearchHistoryEntry[] = [];

  @Output() onHistory = new EventEmitter();

  constructor() {
    this.history = JSON.parse(localStorage.getItem('SearchHistory')) || [];
  }

  ngOnInit() {
    // The constructor doesn't have @Outputs initialized yet. Emit from this
    // life cycle hook instead to be sure they're received on the other side
    debugger;
    this.onHistory.emit(this.history);
  }
}

来自home.html的相关代码

<search-bar (onHistory)="SearchBarHistory($event)"></search-bar>

来自home.ts的相关代码

SearchBarHistory(history: SearchHistoryEntry[]) {
  debugger;
  this.history = history;
}

在Chrome中可以正常工作。SearchBar的构造函数正确地从中读取内容localStorage，ngOnInit并将其发送给接收它的Home组件，并将其存储在本地，并将UI绑定绑定到historyupdate上以显示所有信息。

在IE 11中，此功能无效。ngOnInit直到我在搜索栏中单击后才能运行。似乎任何@Input或生命周期挂钩（特别是我测试过ngOnInit，ngAfterContentInit和ngAfterViewInit他们所有的行为相同），不运行，直到组件的变化检测被触发。如果刷新页面，则页面的运行方式与Chrome完全相同，无需@Input调用任何交互即可调用s或生命周期挂钩，并且历史记录会像应该的那样经过并绑定。

我认为这是Beta版的错误，但与此同时，我有什么可以做的使它在没有交互或页面刷新的情况下首次运行？

Answer 1

我也遇到了这个问题，我使用了一种解决方法，如果出现错误，会自动刷新页面，希望最终能够解决该错误。

它非常丑陋，但至少目前它可以工作。

declare var Modernizr: any;

@Component({
  selector : 'search-bar',
  templateUrl: 'views/searchbar.html'
})
export class SearchBar {
  private history: SearchHistoryEntry[] = [];

  @Output() onHistory = new EventEmitter();

  ie11hack: boolean = true;

  constructor() {
    this.history = JSON.parse(localStorage.getItem('SearchHistory')) || [];

    if (!Modernizr.es6collections || navigator.userAgent.toLowerCase().indexOf("safari") !== -1) {

      setTimeout(() => {
        if (this.ie11hack) {
          window.location.reload();
        }
      }, 500);
    }
  }

  ngOnInit() {
    ie11hack = false;
    // The constructor doesn't have @Outputs initialized yet. Emit from this
    // life cycle hook instead to be sure they're received on the other side
    debugger;
    this.onHistory.emit(this.history);
  }
}

编辑，一个不太难看的部分修复：

这个问题（我认为）是由使用直接 url 而不是使用角度路由器（javascript）引起的。如果您希望您的网站在人们手动输入网址时正常运行，那么您仍然需要上述技巧，但否则您可以执行我下面所做的操作（无论如何您可能都想这样做）。

我改变了这个：

<!-- html -->
<a href="#/objects/objectthingy/{{myObject.id}}" class="my-object-class">

对此：

<!-- html -->
<a href="javascript:void(0)" (click)="openMyObject(myObject.id)" class="my-object-class">

// typescript
openMyObject(objectId: number) {
    this.router.navigate(['/Objects', 'ObjectThingy', { id: objectId}]);
}

并ngAfterViewInit再次调用方法。