先備知識

路由用在哪裡？
根據網址替換頁面，換 component

router-outlet ，會讓 路由分配並顯示 component 內容

部屬 路由需要的是 @angular/router library 的

• Routes
• RouterModule

簡單實作

Step1 建立 app-routing.module.ts(二擇一)

• 第一種方式：初次創建 angular 專案，一同建立根 routing

cmd
-----
ng new [name] --routing

• 第二種方式：自行新增一個 routing

cmd
-----
ng generate module app-routing --flat --module=app

建立 app-routing 的 module ，--flat 表示 不新增資料夾並直接新增檔案，--module=app 表示 匯入到 app.module 的 imports

Step2 匯入路由所需項目

先把剛剛提到的需要的那兩個匯入

src/app/app-routing.module.ts
-----
src/app/app-routing.module.ts
-----
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@NgModule({
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

Step3 新增要用的 component

新增一個 component test1

cmd
-----
ng g c test1

Step4 修改 app-routing.module.ts

app\app-routing.module.ts
-----
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// 部屬路由匯入模組，RouterModule 要在 @NgModule 的 exports 和 imports 中
import { Routes ,RouterModule } from "@angular/router";
// 路由的進入點之一
import { Test1Component } from './test1/test1.component';

// 設定路由對照表
const routes: Routes = [
    { path: '', redirectTo: '/', pathMatch: 'full' },
    { path: 'test', component: Test1Component }
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forRoot(routes)
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Step5 添加 router-outlet

添加 router-outlet 標籤，路由對應到網址，替換 成對應內容

src\app\app.component.html
-----
<a routerLink="/test">Test</a>
<router-outlet></router-outlet>
<div style="text-align:center">
    <h1>
        Welcome to {{ title }}!
    </h1>
</div>

src\app\test1\test1.component.html
-----
<p>
Hello World
</p>

畫面狀況

顯示
url：http://localhost:4200/

(點擊 Test)

顯示
url：http://localhost:4200/test

好了我們看到 Hello World 了