一、添加路由管理引用

打開src/app/app.module.ts文件

import {RouterModule} from ‘@angular/router‘;
import {Routes} from ‘@angular/router‘;

二、設置管理

打開src/app/app.module.ts文件

const appRoutes: Routes = [
  {
    path: ‘‘,
    component: HomeComponent
  },
  {
    path: ‘‘,
    component: NavbarComponent,
    outlet: ‘right
 
‘ /* 設置路由器的位置 */
  },
  {
    path: ‘‘,
    component: SidebarComponent,
    outlet: ‘left‘ /* 設置路由器的位置 */
  },
  {
    path: ‘login‘,
    component: LoginComponent
  },
  {
    path: ‘register‘,
    component: RegisterComponent
  },
  {
    path: ‘setting‘,
    component: SettingsComponent
  },
  {
    path: 
 
‘404‘,
    component: PageNotFountComponent
  },
]

三、註入路由

打開src/app/app.module.ts文件

  /* 註冊模塊 */
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes) /*註冊路由*/
  ],

四、在畫面中引入

打開src/app/app.component.html，修改內容為

<!-- 導航條 -->
<app-navbar></app-navbar>
<br/>
<br/>
<
 
br/>
<!-- 內容 -->
<div class="container-fluid">
  <div class="row">
    <!--左邊導航-->
    <router-outlet name="left"></router-outlet>
    <!--內容-->
    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
      <router-outlet></router-outlet>
    </main>
  </div>
</div>

五、效果預覽

Angular5學習筆記 - 路由管理（五）