一個十分常見的企業網站結構如圖所示為：

我們會點選左側後 右邊更換Component

解決方案有很多 不難

我們可以建立一個“殼元件”，將左側放進去，再利用路由來更改右側Component，填充到殼元件的router-letout中達到效果

但是最佳實踐是 我們全部利用路由來實現 達到最大的靈活性

在官網的英雄demo 路由篇 對這個有詳細的介紹

那麼 我們的路由規劃應該為
主路由

const appRoutes: Routes = [
  {
    path: '業務佈局',
    loadChildren: '業務佈局Module',
  },
  {
    path: '關於我們'
 
,
    loadChildren: '關於我們Module',
  },
  {
    path: '合作伙伴',
    loadChildren: '合作伙伴Module',
    data: { preload: true }
  },
  {
    path: '新聞中心',
    loadChildren: '新聞中心Module',
    data: { preload: true }
  },
  {
    path: '投資者關係',
    loadChildren: '投資者關係Module',
    data: { preload: true }
  },
  { path: ''
 
,   redirectTo: '/首頁', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

子路由為

const 關於我們Routes: Routes = [
  {
    path: '',
    component: 可以放一張圖片Component,
    children: [
      {
        path: '',
        component: 左側小選單Component,
        children: [
          {
            path: ''
 
,
            component: 願景與使命Component
          }，
          {
            path: '公司概況',
            component: 公司概況Component,
          },
          {
            path: '管理團隊',
            component: 管理團隊Component
          }，
          {
            path: '新聞中心',
            component: 新聞中心Component
          }，
          {
            path: '人才招聘',
            component: 人才招聘Component
          }
        ]
      }
    ]
  }
];

看下圖基本就清晰了