IE doesn't call lifecycle bindings or populate @Entry until changes are detected?

Question

I use beta.0 because this outstanding error prevents angular 2 from working in IE in beta and beta .2.

Relevant code from 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);
  }
}

Relevant code from home.html

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

Relevant code from home.ts

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

On Chrome, this works fine. The SearchBar constructor reads correctly from localStorage, into ngOnInitit emits my home component, which receives it, it is stored locally, and the user interface bindings are bound to historyupdate to show the information, like everyone else.

IE 11 . ngOnInit , . , @Input ( , ngOnInit, ngAfterContentInit ngAfterViewInit, ) , . , , Chrome, @Input , , , .

, -, - , ?

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));
    }
}
}

Every Route, Lifecycle Hooks,

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

Answer 2

, , , , .

, .

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-, angular (javascript). , , URL- , , , ( ).

:

<!-- 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 .