internet-explorer-11 – IE不会调用生命周期钩子或填充@Input直到检测到更改？

2019年7月20日 122次阅读

我正在使用beta.0,因为
this outstanding bug阻止了角度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绑定与历史记录更新以显示所有应该的信息.

在IE 11中,这不起作用.在我在搜索栏中单击之前,ngOnInit不会运行.似乎任何@Input或生命周期钩子(特别是我测试过ngOnInit,ngAfterContentInit和ngAfterViewInit并且它们都表现相同)在触发组件的更改检测之前不会运行.如果我刷新页面,那么它的运行方式与Chrome完全相同,不需要进行任何交互即可调用@Inputs或生命周期钩子,并且我的历史记录会经历并受到应有的约束.

我认为这是测试版的一个错误,但同时我还能做些什么才能让它在没有交互或页面刷新的情况下第一次工作？

最佳答案 我有同样的问题,我尝试通过强制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的Every Route组件中调用

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