Angular中使用router-outlet与ngIf切换组件是否存在性能差异

仅从纯性能维度判断，*ngIf的表现优于router-outlet，不存在用router-outlet替代*ngIf获得性能收益的情况。
两者性能差异的核心原因如下：

• router-outlet绑定了完整的Angular路由系统，组件切换时除了和*ngIf一样要执行组件销毁、挂载的基础流程外，还需要额外执行路由规则匹配、路由守卫校验、路由参数解析、全局路由事件广播等逻辑，这部分是*ngIf完全没有的额外开销。
• *ngIf的触发逻辑仅依赖绑定的条件变量的变更检测，逻辑链路极短。而路由系统本身会额外维护一套监听URL变化、状态同步的逻辑，哪怕你使用编程式跳转不修改地址栏URL，也会触发路由内部的全流程校验，额外增加运行时消耗。
• 唯一的例外场景是你开启了路由的RouteReuseStrategy组件缓存策略，切换路由时不会销毁重建组件，此时性能会优于每次切换都销毁重建组件的默认*ngIf实现。但这个收益是组件缓存带来的，和router-outlet本身无关，你完全可以自己基于TemplateRef、ViewContainerRef实现*ngIf配套的组件缓存逻辑，开销比路由缓存更低。

代码示例 #

使用*ngIf的实现 #

<ng-container *ngIf="condition === a">
   <a-component></a-component>
</ng-container>
<ng-container *ngIf="condition === b">
   <b-component></b-component>
</ng-container>

使用router-outlet的实现 #

<router-outlet></router-outlet>

如果你只是需要做同页面内的多组件切换，不需要同步URL状态、路由权限校验等路由专属能力，完全不需要用router-outlet替换*ngIf实现，反而会平白增加不必要的性能损耗。

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