Angular嵌入式视图(EmbeddedView)传递Observable上下文未触发订阅问题

这个问题我之前排查过好几次，核心原因是你在创建嵌入式视图之后才给context赋值，导致Angular的变更检测机制和async管道没有正确绑定到你的Observable上。

咱们来一步步修正：

问题根源 #

当你调用createEmbeddedView时，Angular会立刻完成模板变量（比如let-observ="observ"）和上下文的绑定逻辑，async管道也会在这个阶段订阅对应的Observable。如果事后再修改context对象，视图已经初始化完成，async管道不会主动重新订阅新的Observable，自然就不会触发你tap里的日志了。

正确的实现方式 #

直接在调用createEmbeddedView时就传入完整的上下文对象，而不是事后赋值。修改后的组件类代码如下：

@ViewChild('myTemplate', { read: TemplateRef, static: true })
myTemplate!: TemplateRef<unknown>;

@ViewChild('vcr', { read: ViewContainerRef, static: true })
vcr!: ViewContainerRef;

// 假设你的subject$是这样定义的
subject$ = new Subject<string>();

ngOnInit() {
  // 直接在创建视图时传入上下文
  const newTemp = this.myTemplate.createEmbeddedView(
    {
      observ: this.subject$.pipe(
        tap(() => {
          console.log('context passed');
        }),
      ),
      data: '测试数据' // 这里可以直接传入data的值
    },
    this.vcr.injector
  );

  this.vcr.insert(newTemp);

  // 可以测试一下发送值，看看订阅是否触发
  setTimeout(() => {
    this.subject$.next('来自Observable的数据');
  }, 1000);
}

你的模板代码可以保持不变：

<ng-container #vcr>
</ng-container>
<ng-template #myTemplate let-observ="observ" let-data="data">
    <div>Data: {{ data }}</div>
    <div> Obs data: {{ observ | async }} </div>
</ng-template>

额外说明 #

如果确实有场景需要动态修改上下文内容，那你可以考虑：

• 把上下文里的Observable换成BehaviorSubject或者ReplaySubject，这样新的订阅者能拿到最新值
• 手动触发变更检测（比如注入ChangeDetectorRef，调用markForCheck()或detectChanges()），但这种方式不推荐作为常规解决方案，还是尽量在创建视图时传入完整上下文更稳妥。

备注：内容来源于stack exchange，提问作者Raziel