Angular微前端自定义事件数据绑定失效问题求助

你的问题出在Angular变更检测机制上：通过Renderer2监听的window自定义事件，其回调函数是运行在Angular的NgZone（变更检测上下文）之外的，所以即使你给this.details赋值成功，Angular也不会自动触发视图更新，导致页面绑定不生效。

下面是几种可行的修复方案：

方案1：使用NgZone将回调包裹在Angular变更检测周期内 #

首先注入NgZone服务，然后在事件回调中用ngZone.run()包裹赋值逻辑：

import { NgZone } from '@angular/core';

constructor(private renderer: Renderer2, private ngZone: NgZone) { }

this.handler = this.renderer.listen(
  'window',
  'test',
  ({ detail }: CustomEvent) => {
    console.log('angular==> ', detail.data);
    // 包裹在NgZone.run中，触发变更检测
    this.ngZone.run(() => {
      this.details = detail.data;
    });
    console.log('this.details==> ', this.details);
  }
);

方案2：手动触发变更检测 #

注入ChangeDetectorRef服务，赋值后手动调用变更检测方法：

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

constructor(private renderer: Renderer2, private cdr: ChangeDetectorRef) { }

this.handler = this.renderer.listen(
  'window',
  'test',
  ({ detail }: CustomEvent) => {
    console.log('angular==> ', detail.data);
    this.details = detail.data;
    // 手动触发变更检测
    this.cdr.detectChanges();
    console.log('this.details==> ', this.details);
  }
);

方案3：使用可观察对象结合异步管道（推荐） #

定义一个BehaviorSubject来存储数据，HTML中用async管道自动处理变更检测：

import { BehaviorSubject } from 'rxjs';

// 组件内定义可观察对象
private detailsSubject = new BehaviorSubject<any>(null);
details$ = this.detailsSubject.asObservable();

constructor(private renderer: Renderer2) { }

this.handler = this.renderer.listen(
  'window',
  'test',
  ({ detail }: CustomEvent) => {
    console.log('angular==> ', detail.data);
    this.detailsSubject.next(detail.data);
    console.log('current details==> ', detail.data);
  }
);

HTML模板修改为：

<p>Details of {{ details$ | async }}</p>

补充说明 #

• NgZone.run()会让代码回到Angular的变更检测上下文，自动触发视图更新；
• ChangeDetectorRef.detectChanges()会强制触发当前组件及其子组件的变更检测；
• 异步管道(async)会自动订阅可观察对象，并且在数据更新时自动触发变更检测，同时还能自动取消订阅避免内存泄漏。

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