如何将路由绑定组件的内容拆分渲染到两个不同的router-outlet中

是否可以将单个路由绑定组件的内容拆分渲染到两个独立router-outlet？ #

首先明确结论：Angular原生不支持这种直接拆分的操作。单个路由和对应绑定的组件，默认只会渲染到一个指定的router-outlet（要么是主outlet，要么是单个命名outlet），无法自动把同一个组件内的不同DOM片段分发到多个outlet中。

要实现你描述的效果，有两种可行方案：

方案1：拆分组件+同路径多outlet路由配置 #

你可以把原组件内的div#a和div#b分别抽成两个独立组件，然后在路由配置中为同一路径的不同outlet指定对应渲染组件：

const routes: Routes = [
  {
    path: 'target-path',
    children: [
      // 渲染到默认主router-outlet，对应原div#a的内容
      { path: '', component: MainPartComponent },
      // 渲染到名为second的命名router-outlet，对应原div#b的内容
      { path: '', component: SecondPartComponent, outlet: 'second' }
    ]
  }
]

配置完成后正常导航到/target-path即可，两个outlet会自动渲染对应组件内容。

方案2：使用内容投射机制传递片段 #

如果不想拆分原组件，可以用内容投射的方式把div#b的内容传递到second区域，具体实现见下方的内容传递方案。

向router-outlet外部组件传递HTML内容的更优方案 #

根据复杂度不同可以选择以下方案：

1. 路由元数据（适合静态/轻量内容） #

如果要传递的是简单的文本、配置类内容，可以直接存在路由的data配置中，外部组件订阅路由变化读取对应内容渲染：

// 路由配置
{
  path: 'target-path',
  component: YourRouteComponent,
  data: {
    outerContent: '需要显示在外部的内容'
  }
}

外部组件代码：

constructor(private router: Router, private activatedRoute: ActivatedRoute) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    this.outerContent = this.activatedRoute.firstChild?.snapshot.data?.['outerContent'];
  })
}

如果是HTML内容，配合DomSanitizer处理后用[innerHTML]渲染即可。

2. 共享服务传递TemplateRef（适合复杂动态内容） #

通过共享服务传递模板引用，外部组件用ngTemplateOutlet渲染，实现任意复杂内容的投射：

// 共享服务
@Injectable({ providedIn: 'root' })
export class ContentTransferService {
  private outerContent = new BehaviorSubject<TemplateRef<any> | null>(null);
  outerContent$ = this.outerContent.asObservable();

  setContent(content: TemplateRef<any> | null) {
    this.outerContent.next(content);
  }
}

路由组件内代码：

@Component({
  template: `
    <div #a>主内容，渲染在主router-outlet内</div>
    <ng-template #b>要传递到外部的复杂HTML内容</ng-template>
  `
})
export class YourRouteComponent implements OnInit, OnDestroy {
  @ViewChild('b') bTemplate!: TemplateRef<any>;

  constructor(private contentService: ContentTransferService) {}

  ngOnInit() {
    this.contentService.setContent(this.bTemplate);
  }

  ngOnDestroy() {
    // 路由离开时清空内容，避免残留
    this.contentService.setContent(null);
  }
}

外部组件模板代码：

<ng-container *ngTemplateOutlet="outerContent | async"></ng-container>

外部组件逻辑代码：

outerContent = this.contentService.outerContent$;
constructor(private contentService: ContentTransferService) {}

3. Angular CDK Portal（适合大规模复杂场景） #

如果是中大型项目，推荐直接使用Angular CDK提供的Portal和PortalOutlet能力，这是官方提供的专门用于跨组件/跨区域内容投射的工具，封装了生命周期管理、内容挂载卸载等逻辑，比自己实现共享服务更稳定规范。

内容的提问来源于stack exchange，提问作者Michał B