1. 路由配置（Route Configuration）
在 Angular 路由中，你需要配置路由规则，以确定导航到不同路径时加载哪些组件。路由配置通常在一个模块中完成，该模块充当路由的根。
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
2. RouterOutlet
<router-outlet> 是一个 Angular 指令，用于标记应用中哪个位置应该被用来显示通过路由导航加载的组件。
<!-- app.component.html -->
<router-outlet></router-outlet>
3. RouterLink
routerLink 是一个指令，用于创建导航链接，使用户能够点击链接导航到不同的路径。
<!-- app.component.html -->
<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
4. 路由参数（Route Parameters）
通过路由参数，你可以在导航时传递数据。在路由配置中，使用冒号 : 表示参数。
// app-routing.module.ts
const routes: Routes = [
{ path: 'user/:id', component: UserComponent },
];
在组件中获取路由参数：
// user.component.ts
import { ActivatedRoute } from '@angular/router';
// ...
constructor(private route: ActivatedRoute) {
this.route.params.subscribe(params => {
this.userId = params['id'];
});
}
5. 路由守卫（Route Guards）
路由守卫用于保护导航，可以执行诸如身份验证、权限检查等操作。
// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
@Injectable({
providedIn: 'root',
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(): boolean {
if (/* 检查用户是否经过身份验证 */) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
}
}
在路由配置中使用路由守卫：
// app-routing.module.ts
const routes: Routes = [
{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] },
];
6. 子路由（Child Routes）
你可以在一个路由中定义子路由，用于创建具有嵌套关系的页面结构。
// app-routing.module.ts
const routes: Routes = [
{
path: 'products',
component: ProductsComponent,
children: [
{ path: 'list', component: ProductListComponent },
{ path: 'detail/:id', component: ProductDetailComponent },
],
},
];
7. 懒加载（Lazy Loading）
懒加载是一种优化技术，允许你在应用中按需加载模块，而不是在应用启动时加载所有模块。
// app-routing.module.ts
const routes: Routes = [
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
];
这只是 Angular 路由器的一些基本概念和用法。要深入了解更多内容，可以参考 Angular 官方文档中的[路由器指南](https://angular.io/guide/router)。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4947/Angular