Angular 5哈希路由导致IE浏览器视图无法更新问题咨询

我之前维护Angular 5项目时，刚好碰到过和你一模一样的IE11兼容问题——哈希路由下导航返回后旧视图无法更新，变更检测没完全生效。结合当时的排查和解决经验，分享几个亲测有效的方案：

一、手动强制触发变更检测 #

这是最直接的临时修复方式，针对受影响的组件或者全局层面触发变更检测：

1. 在组件内触发 #

在需要更新的组件中注入ChangeDetectorRef，在初始化或者路由激活时调用检测方法：

import { ChangeDetectorRef, OnInit } from '@angular/core';

export class HomeComponent implements OnInit {
  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    // 组件初始化时强制触发变更检测，覆盖IE11的异常场景
    this.cdr.detectChanges();
    // 如果是OnPush策略的组件，用markForCheck()更合适
    // this.cdr.markForCheck();
  }
}

2. 全局导航后触发 #

如果多个组件都有这个问题，可以在根组件（比如AppComponent）中监听路由导航结束事件，全局触发变更检测：

import { Router, NavigationEnd } from '@angular/router';
import { ChangeDetectorRef, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
  constructor(private router: Router, private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.router.events.subscribe(event => {
      // 每次导航完成后触发一次全局变更检测
      if (event instanceof NavigationEnd) {
        this.cdr.detectChanges();
      }
    });
  }
}

二、修复IE11的popstate事件兼容性 #

IE11对哈希路由的popstate事件处理逻辑和现代浏览器不一致，导致Angular无法正确捕获路由变化并触发变更检测。可以手动监听该事件并触发检测：

import { ChangeDetectorRef, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    // 判断当前是否是IE11浏览器
    const isIE11 = window.navigator.userAgent.indexOf('Trident') !== -1;
    if (isIE11) {
      window.addEventListener('popstate', () => {
        // 哈希变化时强制触发变更检测
        this.cdr.detectChanges();
      });
    }
  }
}

三、检查组件变更检测策略 #

如果你的组件使用了ChangeDetectionStrategy.OnPush，需要确保：

• 输入属性（@Input()）的引用发生了变化
• 组件内的可观察对象（Observable）使用了async管道
  如果不符合这些条件，Angular的变更检测不会自动触发，此时需要手动调用markForCheck()来标记组件需要检测。

四、确保IE11所需的Polyfills齐全 #

Angular 5对IE11的支持依赖于特定的Polyfills，检查你的polyfills.ts文件是否包含以下内容（如果缺失，安装对应依赖并引入）：

// IE9, IE10 and IE11 requires all of the following polyfills.
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

// IE10 and IE11 requires the following for NgClass support on SVG elements
import 'classlist.js';  // Run `npm install --save classlist.js`.

// IE10 and IE11 requires the following for the Reflect API.
import 'core-js/es6/reflect';

// IE10 and IE11 requires the following for Web Animations `@angular/platform-browser/animations`.
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

这些Polyfills填补了IE11缺失的现代JavaScript特性，是Angular正常运行的基础。

内容的提问来源于stack exchange，提问作者BeetleJuice