精通 Angular 17 路由
Angular 路由是一项基础功能，它使开发者能够创建动态且响应迅速的单页应用程序 (SPA)。通过在组件之间无缝导航，用户可以体验到流畅且引人入胜的交互。在本指南中，我们将探讨 Angular 路由的关键方面以及如何有效地利用其功能。
设置路线
1. 导入组件：
在app.routes.ts文件中，导入你刚刚创建的组件。这样，你就可以在定义路由时引用这些组件。
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
2. 定义路由
在同一个app.routes.ts文件中创建一个Routes数组，并定义你的路由。 每个路由都是一个 JavaScript 对象，包含一个路径（URL）和一个组件：
export const routes: Routes = [
{ path: 'first-component', component: FirstComponent },
{ path: 'second-component', component: SecondComponent}
];
3. 配置应用程序
将以下配置添加到app.config.ts 文件中：
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes)]
};
4. 设置导航
在您的应用程序模板（例如app.component.html）中，为这两个组件添加导航链接：
<h1>Angular Router App</h1>
<nav>
<ul>
<li><a routerLink="first-component" routerLinkActive="active">First Component</a></li>
<li><a routerLink="second-component" routerLinkActive="active">Second Component</a></li>
</ul>
</nav>
<!-- The routed views render on <router-outlet> -->
<router-outlet></router-outlet>
您还需要将RouterLink、RouterLinkActive和RouterOutlet添加到 AppComponent 的 imports 数组中。
' routerLink ' 还可以接受路由段数组，允许您导航到具有动态值的路由。
<a [routerLink]="['/products', productID]">View Product</a>
在这种情况下，productId是一个表示特定产品 ID 的变量，点击该链接将跳转到具有相应 ID 的产品详情页面。
此外，您还可以使用Router.navigate设置导航。
constructor(private router: Router) {}
goToItems() {
this.router.navigate(['/items']);
}
如果您的路线需要参数，您可以将它们包含在导航数组中。
goToItemDetails(itemID: number) {
this.router.navigate(['/items', itemID]);
}
您还需要将 Router 添加到AppComponent的 imports 数组中。
5. 路由顺序：
路由器采用先匹配获胜的策略，因此请先列出更具体的路由，然后是空路径路由作为默认值。通配符路由应放在最后。
6. 重定向
通过配置路由并设置redirectTo和pathMatch来实现重定向。例如：
{ path: '', redirectTo: '/home', pathMatch: 'full' },
请确保在配置中将重定向路由放在通配符路由之前。
7. 显示 404 页面
如果要显示自定义 404 页面，请设置一个通配符路由，并将 component 属性设置为PageNotFoundComponent：
{ path: '**', component: PageNotFoundComponent },
8. 嵌套路由
随着应用程序的增长，请考虑创建相对于组件的子路由。这些称为子路由。包含第二个在父组件模板中，并在 Routes 数组中定义子路由：
const routes: Routes = [
{
path: 'parent',
component: ParentComponent,
children: [
{ path: 'child1', component: Child1Component },
{ path: 'child2', component: Child2Component },
// Add more child routes as needed
]
}
];
9. 设置页面标题
使用路由配置中的 title 属性为页面分配唯一的标题。例如：
const routes: Routes = [
{
path: 'parent',
title: 'Parent',
component: ParentComponent,
children: [
{ path: 'child1', title: 'Child1', component: Child1Component },
{ path: 'child2', title: 'Child2', component: Child2Component },
// Add more child routes as needed
]
}
];
10. 获取路由信息
我们来看一个例子：假设我们有一个博客文章列表，并且想要跳转到特定文章的详细视图。详细视图需要从路由获取文章 ID 才能显示正确的信息。以下是实现方法：
在这个例子中，我们设置了路由，用于从博客文章列表导航到特定文章的详情页面。BlogDetailComponent使用@Input属性postId从路由接收 ID，使用BlogService获取详情，并显示这些信息。
在应用程序的路由配置中，使用`withComponentInputBinding`特性和`provideRouter`方法。这样就可以通过路由将信息从一个组件传递到另一个组件。
import { ApplicationConfig } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { appRoutes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(appRoutes, withComponentInputBinding())]
};
在您的BlogListComponent中，当用户点击博客文章查看详情时，导航到blog/:postId路由：
viewBlogDetails(postId: string) {
this.router.navigate(['/blog', postId]);
}
在需要接收信息的组件中，定义一个与需要接收的参数名称相匹配的@Input()属性。
export class BlogDetailComponent {
@Input() set postId(postId: string) {
this.post$ = this.blogService.getBlogPost(postId);
}
post$!: Observable<BlogPost | undefined>;
constructor(private blogService: BlogService) {}
}