Angular子组件切换方案咨询：需使用routerLink吗？

你的场景与现有代码 #

你当前有一个Customer主组件，结构是侧边栏+客户信息详情组件，代码如下：

<div id="customer" class="page-layout carded left-sidenav">
  <mat-sidenav-container>
    <mat-sidenav class="sidenav" position="start" opened="true" mode="side" mat-is-locked-open="gt-md">
      <app-customer-sidenav></app-customer-sidenav>
    </mat-sidenav>
    <div class="center">
      <div class="content-card mat-white-bg" [ngClass]="{'current-customer-selected':currentCustomer}">
        <div class="content" fxFlexAlign="row">
          <app-customer-details fxFlex></app-customer-details>
        </div>
      </div>
    </div>
  </mat-sidenav-container>
</div>

现在需要在侧边栏切换地址、银行账户等已开发好的子组件，下面分析每个方案的适用场景和优劣：

1. routerLink + Angular Router #

这是我最推荐的方案，适合当这些子组件需要独立的URL、浏览器历史支持（前进/后退），或者未来可能被单独访问的场景。

优势：

• 完全符合Angular SPA的设计理念，每个子视图对应独立路由，支持书签分享、甚至基础SEO优化。
• 组件解耦性高：每个子组件（地址、银行账户）不需要依赖主组件的状态来控制显示，只需要通过路由参数获取当前客户信息即可。
• 扩展性好：后续新增子视图时，只需要添加路由配置和侧边栏链接，不需要修改主组件的模板逻辑。

实现思路：

• 把主组件中<app-customer-details>的位置替换成<router-outlet></router-outlet>。
• 在路由配置中定义子路由，比如：

  const routes: Routes = [
    {
      path: 'customer',
      component: CustomerComponent,
      children: [
        { path: 'details', component: CustomerDetailsComponent },
        { path: 'address', component: CustomerAddressComponent },
        { path: 'bank-account', component: CustomerBankAccountComponent },
        { path: '', redirectTo: 'details', pathMatch: 'full' } // 默认显示详情页
      ]
    }
  ];
  

• 侧边栏的选项使用routerLink指向对应路由，比如：

  <a mat-list-item routerLink="./details">客户详情</a>
  <a mat-list-item routerLink="./address">客户地址</a>
  <a mat-list-item routerLink="./bank-account">银行账户</a>
  

2. ngIf / hidden #

适合**不需要路由变化，只是同一页面内的局部视图切换，且子组件需要共享主组件上下文（比如当前选中的currentCustomer）**的场景。

两者区别：

• *ngIf：会直接添加/移除DOM元素，组件会被销毁和重新初始化。适合组件初始化成本低，且需要节省DOM资源的场景。
• [hidden]：只是通过CSSdisplay: none隐藏组件，DOM仍然存在，组件状态会被保留。适合需要保持表单输入等状态的场景，但会造成一定的DOM冗余。

劣势：

• 随着子组件增多，主组件模板会变得冗长（一堆*ngIf），维护成本上升。
• 不支持浏览器历史记录，用户无法通过前进/后退按钮切换视图，也无法通过URL直接访问某个子视图。

3. ngSwitch #

可以看作是*ngIf的优化版，适合多个互斥子组件切换的场景，语法比一堆*ngIf更清晰整洁。

实现思路：

• 在主组件中维护一个状态变量，比如activeTab: string = 'details'。
• 用ngSwitch包裹所有子组件：

  <div class="content" fxFlexAlign="row" [ngSwitch]="activeTab">
    <app-customer-details fxFlex *ngSwitchCase="'details'"></app-customer-details>
    <app-customer-address fxFlex *ngSwitchCase="'address'"></app-customer-address>
    <app-customer-bank-account fxFlex *ngSwitchCase="'bank-account'"></app-customer-bank-account>
  </div>
  

• 侧边栏点击时更新activeTab的值即可。

优势：

• 比多个*ngIf逻辑更清晰，模板更易读。
• 同样适合不需要路由的局部切换场景，且子组件可以共享主组件的currentCustomer状态。

最终建议 #

• 如果希望子视图支持URL跳转、浏览器历史，或者后续有独立访问的需求，优先选择routerLink + Angular Router，这是最符合Angular最佳实践的方案。
• 如果只是同一页面内的简单局部切换，不需要路由，ngSwitch是比*ngIf更优雅的选择；如果需要保留组件状态，再考虑hidden。

内容的提问来源于stack exchange，提问作者Ivan-Mark Debono