一、配置路由在Angular 4中，我們可以通過(guò)RouterModule來(lái)配置應(yīng)用的路由。首先，需要導(dǎo)入RouterModule，并設(shè)置好routes數(shù)組，其中每個(gè)元素表示一個(gè)路由配置。比如，以下代碼

一、配置路由

在Angular 4中，我們可以通過(guò)RouterModule來(lái)配置應(yīng)用的路由。首先，需要導(dǎo)入RouterModule，并設(shè)置好routes數(shù)組，其中每個(gè)元素表示一個(gè)路由配置。比如，以下代碼定義了兩個(gè)路由：home和about。

```

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from '';

import { AboutComponent } from '';

const routes: Routes [

{ path: 'home', component: HomeComponent },

{ path: 'about', component: AboutComponent }

];

@NgModule({

imports: [(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

```

在AppModule中，要將AppRoutingModule添加到imports數(shù)組中，以便啟用路由功能。

二、參數(shù)傳遞

在路由中，我們經(jīng)常需要傳遞參數(shù)。Angular 4提供了多種傳遞參數(shù)的方式。下面是幾種常用的方法：

1. 查詢(xún)參數(shù)

查詢(xún)參數(shù)是以鍵值對(duì)的方式傳遞的，可以通過(guò)ActivatedRoute服務(wù)來(lái)獲取。例如，我們可以通過(guò)以下代碼獲取id參數(shù)的值：

```

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {

(params > {

const id params['id'];

console.log(id);

});

}

```

2. 路由參數(shù)

路由參數(shù)是直接跟在URL后面的參數(shù)，可以通過(guò)ActivatedRoute服務(wù)來(lái)獲取。例如，我們可以通過(guò)以下代碼獲取id參數(shù)的值：

```

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {

const id ['id'];

console.log(id);

}

```

3. 路由導(dǎo)航傳遞參數(shù)

除了通過(guò)URL傳遞參數(shù)外，還可以通過(guò)路由導(dǎo)航時(shí)傳遞參數(shù)。例如，我們可以通過(guò)以下代碼將參數(shù)id傳遞給目標(biāo)組件：

```

import { Router } from '@angular/router';

constructor(private router: Router) {}

goToAboutPage(id: string) {

(['/about'], { queryParams: { id: id } });

}

```

三、路由守衛(wèi)

路由守衛(wèi)用于在導(dǎo)航之前或之后執(zhí)行一些操作。Angular 4提供了多種路由守衛(wèi)，包括CanActivate、CanActivateChild、CanDeactivate、Resolve等等。以下是一個(gè)CanActivate守衛(wèi)的示例：

```

import { Injectable } from '@angular/core';

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

@Injectable()

export class AuthGuard implements CanActivate {

constructor(private router: Router) {}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

const isLoggedIn ... // 判斷用戶(hù)是否已登錄的邏輯

if (isLoggedIn) {

return true;

} else {

(['/login']);

return false;

}

}

}

```

在定義好守衛(wèi)后，我們需要將其添加到路由配置中。例如，以下代碼將AuthGuard應(yīng)用到/about路由：

```

{ path: 'about', component: AboutComponent, canActivate: [AuthGuard] }

```

通過(guò)使用路由守衛(wèi)，我們可以實(shí)現(xiàn)許多功能，如權(quán)限控制、登錄驗(yàn)證等。

結(jié)論：

本文詳細(xì)介紹了Angular 4中常用的路由方法，包括配置路由、參數(shù)傳遞和路由守衛(wèi)等。通過(guò)學(xué)習(xí)這些方法，讀者將能更好地使用Angular 4的路由功能，提升應(yīng)用的開(kāi)發(fā)效率和用戶(hù)體驗(yàn)。

參考資料：

- Angular Documentation:

- Angular Router: