internet-explorer-11 - IE 在检测到更改之前不调用生命周期 Hook 或填充@Input？

Question

我正在使用 beta.0 因为 this outstanding bug防止 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 绑定(bind)绑定(bind)到 history 更新以显示应有的信息。

在 IE 11 中这不起作用。 ngOnInit 只有在我点击搜索栏内时才会运行。似乎任何 @Input 或生命周期 Hook (特别是我测试过 ngOnInit、ngAfterContentInit 和 ngAfterViewInit 和它们的行为都相同)在组件的变更检测被触发之前不会运行。如果我刷新页面，那么它会像 Chrome 一样运行，其中不需要交互来调用 @Input 或生命周期 Hook ，我的历史记录会像它应该的那样被绑定(bind)。

我认为这是 Beta 版的一个错误，但与此同时，我能做些什么来让它在没有交互或页面刷新的情况下首次运行吗？

Answer 1

我遇到了同样的问题，我试图通过强制 detectChanges 来解决它，例如:

import {Injectable,ApplicationRef, NgZone} from '@angular/core';
@Injectable()
export class IeHackService {

constructor(
    private _appRef: ApplicationRef,
    private _zone: NgZone) {}

private isIe() {
    let ua = window.navigator.userAgent;
    let msie = ua.indexOf('MSIE ');
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number
        return true;
    return false;
}

onComponentLoadInIe() {
    if (this.isIe()) {
        this._zone.run(() => setTimeout(() => this._appRef.tick(), 5));
    }
}
}

然后在每个使用 Lifecycle Hooks 的 Route 组件中调用

   constructor(private dialogService: ModalDialogService,ieHackService: IeHackService) {
    ieHackService.onComponentLoadInIe();
}