iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 23
0
Modern Web

Angular初期筆記系列 第 23

DAY23-Angular6之路由-再上一層樓

先說說有路由守衛

當需要路由守衛,用於判別可否進入該路由,關鍵字:canActivate,下面都是好文章,快去爬文吧!ㄜ~先把下面的看完再走!
https://angular.io/api/router/CanActivate
https://ithelp.ithome.com.tw/articles/10195347
https://ithelp.ithome.com.tw/articles/10187416

再來繼續吧!

接續昨日的內容,今天繼續做第二層路由

Step6 新增一個 Module

cmd
-----
ng g m member

Step7 自行新增一個 routing

cmd
-----
member 資料夾路徑>ng generate module member-routing --flat --module=member

Step8

新增 member 的 component

cmd
-----
member 資料夾路徑>ng g c member --flat

新增 member-info 在 member 資料夾裡面

cmd
-----
member 資料夾路徑>ng g c member-info

Step9

修改 app-routing.module.ts

src\app\app-routing.module.ts
-----
const routes: Routes = [
    { path: '', redirectTo: '/', pathMatch: 'full' },
    { path: 'test', component: Test1Component },
    { path: 'member', loadChildren: () => MemberModule}
];

Step10

member.component.html 添加 router-outlet 標籤

src\app\member\member.component.html
-----
<p>
    member works!
</p>
<router-outlet></router-outlet>

Step11

修改 member-routing.module.ts

src\app\member\member-routing.module.ts
-----
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from "@angular/router";
import { MemberComponent } from "./member.component";
import { MemberInfoComponent } from "./member-info/member-info.component";

const routes: Routes = [{ 
    path: '', component: MemberComponent ,children: [
        {path: '',component: MemberComponent},
        {path: 'memberInfo',component: MemberInfoComponent}
    ]
}]

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

Step9 中,path: 'member', loadChildren: () => MemberModule,代表
url 後續字串 只要是 member 就會導向這個 routing 設定
http://localhost:4200/member/...
Step11 routing 設定,就是 設定 ... 怎麼配置

path: ' ', component: MemberComponent ,children: [] 的說明
假若現在 url:http://localhost:4200/member

children 內 path: ' ',component: MemberComponent,member.component.html 內部的 router-outlet 標籤 替換成 MemberComponent 的內容

path: ' ', component: MemberComponent, children: [],app.component.html 內部的 router-outlet 標籤 替換成 MemberComponent 的內容

這邊可能要多看幾篇路由相關文章,慢慢消化,因為我也用了好一陣子才懂,假如你秒懂,我只能說你猛猛

顯示
https://ithelp.ithome.com.tw/upload/images/20181102/2010775422mnRiwPs4.png


上一篇
DAY22-Angular6之路由-簡單實作
下一篇
DAY24-Angular6之Array 說明
系列文
Angular初期筆記30

尚未有邦友留言

立即登入留言