iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 22
0
Modern Web

Angular初期筆記系列 第 22

DAY22-Angular6之路由-簡單實作

先備知識

路由用在哪裡?
根據網址替換頁面,換 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/

https://ithelp.ithome.com.tw/upload/images/20181101/20107754XRbZIfsT79.png

(點擊 Test)

顯示
url:http://localhost:4200/test
https://ithelp.ithome.com.tw/upload/images/20181101/20107754pPcSprQ0h3.png
好了我們看到 Hello World 了


上一篇
DAY21-Angular6之pipe
下一篇
DAY23-Angular6之路由-再上一層樓
系列文
Angular初期筆記30

尚未有邦友留言

立即登入留言