如何在Angular項(xiàng)目中設(shè)置路由

在Angular項(xiàng)目中設(shè)置路由有兩種常用的方式：基于Angular Router的路由設(shè)置和基于Angular CLI的路由設(shè)置。

基于Angular Router的路由設(shè)置：

1. 在app.module.ts文件中引入RouterModule和Routes模塊：

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

2. 創(chuàng)建路由配置數(shù)組：

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

3. 將路由配置數(shù)組傳遞給RouterModule.forRoot()方法并在imports數(shù)組中導(dǎo)入RouterModule：

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

4. 在模板文件中使用router-outlet指令來(lái)顯示對(duì)應(yīng)的組件：

<router-outlet></router-outlet>

基于Angular CLI的路由設(shè)置：

1. 使用Angular CLI生成一個(gè)新的組件：

ng generate component componentName

2. 在app-routing.module.ts文件中設(shè)置路由配置：

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

3. 將路由配置數(shù)組傳遞給RouterModule.forRoot()方法并在imports數(shù)組中導(dǎo)入RouterModule：

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

4. 在app.module.ts文件中引入AppRoutingModule并添加到imports數(shù)組中：

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    AppRoutingModule
  ]
})

5. 在模板文件中使用router-outlet指令來(lái)顯示對(duì)應(yīng)的組件：

<router-outlet></router-outlet>

通過(guò)以上步驟，您可以在Angular項(xiàng)目中成功設(shè)置路由。您可以根據(jù)項(xiàng)目需求選擇適合您的路由設(shè)置方式。