Angular组件降级至AngularJS时的Transclusion（内容投影）错误求助

你遇到的这个ngTransclude:orphan错误，本质上是Angular与AngularJS混合开发中降级组件适配的预期行为，并不是Bug。咱们来拆解下问题原因，再给出可行的解决方案。

问题原因 #

当你把Angular组件通过downgradeComponent降级为AngularJS指令后，这个降级指令会创建一个独立的Angular运行上下文。而AngularJS的ng-transclude指令依赖于当前所在的AngularJS组件的transclusion作用域——你把<ng-transclude>放在了降级组件的内部模板里，此时这个指令会被Angular的编译流程接管，脱离了原本包裹它的AngularJS组件（ng1Component）的transclusion上下文，所以AngularJS找不到能提供投影内容的父组件，就抛出了"orphan"错误。

而直接使用降级组件时正常，是因为此时投影内容直接作为降级组件的子元素，Angular的降级适配器会自动把这些内容映射到Angular组件的<ng-content>上，不需要经过AngularJS的ng-transclude中转。

解决方案 #

最直接的修复方式是调整AngularJS组件的模板结构，让ng-transclude在降级组件的外部完成投影内容的传递，再把内容交给Angular组件的<ng-content>处理：

修改AngularJS组件代码 #

angular
  .module(angularjsAppModule, []).component(
    'ng1Component',
    {
      transclude: true,
      template: `
        <ng-component-downgrade>
          <!-- 把ng-transclude放在降级组件的直接子节点位置 -->
          <ng-transclude></ng-transclude>
        </ng-component-downgrade>
      `
    }
  )

这样修改后，AngularJS组件的投影内容会先通过ng-transclude渲染出来，作为降级组件的子元素，此时Angular的降级适配器就能正确识别这些内容，并将其投影到Angular组件的<ng-content>位置，完美解决内容不显示和报错的问题。

进阶场景处理（如果需要中间处理） #

如果你的业务场景需要在AngularJS组件里先对投影内容做一些处理（比如添加额外元素、逻辑判断），可以先把投影内容放到AngularJS组件的模板里，再整体传给降级组件：

angular
  .module(angularjsAppModule, []).component(
    'ng1Component',
    {
      transclude: true,
      template: `
        <ng-component-downgrade>
          <div class="ng1-wrapper">
            <ng-transclude></ng-transclude>
            <p>Added by AngularJS Component</p>
          </div>
        </ng-component-downgrade>
      `
    }
  )

这种方式同样能保证ng-transclude在AngularJS组件的作用域内工作，同时把处理后的内容传递给降级的Angular组件。

验证效果 #

修改完成后，你原本的HTML中：

<ng1-component>
  <div class="transcluded">Transcluded content</div>
</ng1-component>

这段内容会正确经过AngularJS组件的ng-transclude，再传递到降级Angular组件的<ng-content>中显示，控制台的错误也会消失。

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