AngularJS 4(七)【路由】

風靈使發表於2018-08-24
AngularJS路由

路由

通過 URL 對映到對應的功能實現，也就是不同的 URL 會渲染對應的元件。URL 的切換實際就是元件之間的切換。

簡單的路由入門

宿主頁面 – index.html
大多數帶路由的應用都要在 index.html 的 <head> 標籤下先新增一個 <base>元素，來告訴路由器該如何合成導航用的URL。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Project</title>
    <base href="/">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <app-root></app-root>
</body>
</html>

路由配置檔案 – router.js
路由器需要先配置才會有路由資訊，用 RouterModule.forRoot 方法來配置路由器， 並把它的返回值新增到 AppModule 的 imports 陣列中。

import { RouterModule, Routes } from '@angular/router';
import { StudentsComponent } from '../components/students/students.component';
import { LoginComponent } from '../components/login/login.component';

const appRoutes: Routes = [
    {path: 'login', component: LoginComponent},
    {path: 'students', component: StudentsComponent},
]

export const RootRouter = RouterModule.forRoot(
    appRoutes,
    { enableTracing: true } // <-- debugging purposes only
  )

根元件 – app.component.html
路由切換時要把對應的元件輸出到對應的位置，該位置稱之為路由出口 <router-outlet></router-outlet>
一個模板中只能有一個未命名的 <router-outlet>。 但路由器可以支援多個命名的路由出口。

<h1>app</h1>
<a routerLink="/login">Login</a>
<a routerLink="/students">Student</a>
<router-outlet></router-outlet>

根模組 – app.module.ts

import {RootRouter} from './router/root.router';
@NgModule({
    imports: [
        RootRouter
    ]
})

萬用字元路由

除路由配置表中的路由，瀏覽器訪問其它路由都會報錯。Angular 提供了一個萬用字元路由來攔截所有無效的路由，也就是所有不在路由配置表中的路由都會導航到該路由。

const appRoutes: Routes = [
    {path: '**', component:　PagenotfoundComponent}
]

重定向路由

重定向路由需要一個pathMatch屬性，來告訴路由器如何用URL去匹配路由的路徑，否則路由器就會報錯。也就是說路由器應該只有在完整的URL等於”時才選擇 LoginComponent 元件，因此我們要把pathMatch設定為’full’。

const appRoutes: Routes = [
    {path: '', redirectTo: '/login', pathMatch: 'full'},
]

路由引數

路由配置表

const appRoutes: Routes = [
    {path: 'students/:id/:name', component: StudentsComponent}
]

接收引數

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-students',
  templateUrl: './students.component.html',
  styleUrls: ['./students.component.css']
})
export class StudentsComponent implements OnInit {
    constructor(private route: ActivatedRoute, private router: Router) { }
    ngOnInit() {
        //轉成物件
        this.route.params.subscribe((params) => {
            console.log(params);
        });
        //單個接收
        this.route.snapshot.paramMap.get('name');
    }
}

路由跳轉

this.router.navigate(['/students/10/admin']);

路由巢狀

路由配置表

const appRoutes: Routes = [
    {
        path: 'students', 
        component: StudentsComponent，
        children: [
            {path: 'get', component: GetComponent}
        ]
    }
]

在 StudentsComponent 中要新增 <router-outlet></router-outlet>

相關文章