Angular调用createEmbeddedView创建的视图脱离变更检测如何解决

核心问题根因&修复方案 #

1. 子组件Input参数为undefined修复 #

你模板定义的是<ng-template let-data>，Angular 嵌入式视图规则中，let-xxx默认绑定上下文的$implicit字段，你直接传入业务上下文，导致模板中拿到的data为undefined，子组件绑定的data.cluster、data.marker自然为空。两种修复方案选其一即可：

• 方案A：调整传入的上下文结构

// 把你的业务上下文包在$implicit字段中，匹配模板的let-data绑定
const view = template.createEmbeddedView({
  $implicit: context
});

• 方案B：修改模板绑定规则
  如果你的业务上下文本身就有cluster、marker字段，可以直接显式绑定：

<ng-template let-cluster="cluster" let-marker="marker">
  <carrier-marker [cluster]="cluster" [marker]="marker"></carrier-marker>
</ng-template>

2. 后续变更检测失效修复 #

你仅创建了嵌入式视图，没有将其纳入Angular的全局变更检测树，除了手动调用detectChanges()外，Angular全局变更检测周期不会感知到这个视图的存在，自然不会触发后续更新，async管道也无法正常工作，view.reattach()对从未挂载过的视图无效。
根据你的业务场景选对应修复方案：

• 场景1：视图需要挂载到调用组件的DOM节点下
  给service方法新增ViewContainerRef入参（从调用该方法的组件注入传入），创建视图后插入容器即可：

// service方法新增入参
createClusterOnMap$<T>(
  contexts$: Observable<readonly T[]>,
  clusterTemplate$: Observable<TemplateRef<T>>,
  destroy$: Observable<void>,
  viewContainerRef: ViewContainerRef // 新增
) {
  // ...原有逻辑
  const view = template.createEmbeddedView({ $implicit: context });
  viewContainerRef.insert(view); // 插入容器，自动纳入变更检测
  view.detectChanges(); // 仅需首次手动触发一次
}

• 场景2：视图需要作为地图自定义覆盖物等独立DOM节点存在
  在service中注入ApplicationRef，手动将视图附着到全局变更检测，销毁时记得卸载避免内存泄漏：

@Injectable()
export class MyService {
  constructor(private appRef: ApplicationRef) {} // 注入ApplicationRef

  createClusterOnMap$<T>(/* 原有入参 */) {
    combineLatest([contexts$, clusterTemplate$]).pipe(
      takeUntil(destroy$), // 加销毁逻辑避免内存泄漏
      tap(([contexts, template]) => {
        contexts.forEach(context => {
          const view = template.createEmbeddedView({ $implicit: context });
          this.appRef.attachView(view); // 附着到全局变更检测
          view.detectChanges();
          // 销毁时卸载视图
          destroy$.subscribe(() => {
            this.appRef.detachView(view);
            view.destroy();
          })
        })
      })
    ).subscribe()
  }
}

其他优化 #

你原有逻辑中用map操作符执行副作用逻辑不合理，建议改成tap操作符，同时订阅必须加takeUntil(destroy$)避免内存泄漏。

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