理解 Angular 中路由的目的
介绍
当用户在 Web 应用中执行任务时，Angular 中的路由可帮助我们从一个视图导航到另一个视图。在本指南中，您将了解 Angular 路由器的主要功能。
Angular 路由概述
用户在应用中导航时采取的一些操作示例包括：
- 在地址栏中输入 URL，浏览器就会导航到相应的页面
- 单击页面上的链接，浏览器将导航到新页面
- 点击浏览器的后退和前进按钮，浏览器就会在页面历史记录中向前和向后导航
Angular 路由器可以将浏览器 URL 解释为导航到客户端生成的视图的指令。它可以将可选参数传递给支持视图组件，帮助它决定要呈现哪些特定内容。您可以将路由器绑定到页面上的链接，当用户单击链接时，它将导航到相应的应用程序视图。
路由器概念
Angular 路由器位于其自己的库包 @angular/router 中。从中导入您需要的内容，就像从任何其他 Angular 包中导入一样。它是一项可选服务，可为给定的 URL 提供特定的组件视图。
文件名：app.module.ts
import { RouterModule, Routes } from '@angular/router';
配置路由器
让我们看看如何配置 Angular 路由器。以下示例创建五个路由定义，通过RouterModule.forRoot() 方法配置路由器，并将结果添加到AppModule 的 imports 数组中。
文件名：app.module.ts
const appRoutes: Routes = [
{ path: 'company', component: CompanyComponent },
{ path: 'employee/:id', component: EmployeeDetailComponent },
{
path: 'employees',
component: EmployeeListComponent,
data: { title: 'Employees List' }
},
{ path: '',
redirectTo: '/employees',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }
)
],
...
})
export class AppModule { }
路由器链接
配置路线后，下一步是决定如何导航。导航将基于用户操作（例如单击超链接等）进行。
使用RouterLink指令到锚标签进行导航，如下所示。
文件名：app.module.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['./app.component.css'],
templateUrl: './app.component.html'
})
export class AppComponent {
title ='Employee application' ;
}
文件名：app.component.html
<h1>{{title}}</h1>
<nav>
<a [routerLink]='["/employeedashboard"]' routerLinkActive="active">Employee Dashboard</a>
<a [routerLink]='["/employees"]' routerLinkActive="active">Employees</a>
</nav>
<router-outlet></router-outlet>
在上面的例子中，我们创建了超链接和routerLink指令并指定了要导航的路径。如果用户点击员工仪表板，它将导航到/employeedashboard。routerLinkActive在单击链接时将给定的 CSS 类应用于链接，使其看起来像活动链接（active是在app.component.css中定义的 CSS 类，在本例中将链接颜色更改为蓝色）。
router-outlet是显示与给定路径关联的组件的输出的位置。例如，如果用户单击Employees，它将导航到/employees，这将执行配置详细信息中提到的EmployeesComponent类，并且输出将显示在router-outlet类中。要以编程方式导航，我们可以使用路由器类的navigation()方法。将路由器类注入组件并调用 navigation 方法，如下所示。
this.router.navigate([url, parameters])
路线参数
与 URL 一起传递的参数称为路由参数。使用以下 CLI 命令生成员工仪表板组件。
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Employee } from '../emploee/employee';
import { EmployeeService } from '../employee/employee.service';
@Component({
selector: 'app-employeedashboard',
templateUrl: './employeedashboard.component.html',
styleUrls: ['./employeedashboard.component.css']
})
export class EmployeeDashboardComponent implements OnInit {
employees: Employee[] = [];
constructor(
private router: Router,
private employeeService: EmployeeService) { }
ngOnInit() {
this.employeeService.getEmployees()
.subscribe(employees => this.employees = employees.slice(1, 5));
}
gotoDetail(employee: Employee) {
this.router.navigate(['/employeedetail', employee.id]);
}
}
从@angular/router模块导入路由器类。通过构造函数将其注入到组件类中。this.router.navigate()方法用于以编程方式导航到特定 URL。Navigate()方法接受两个参数：要导航的路径和要传递的路由参数值。这里的路径将是employeedetail/<employee_id>。
访问路由参数
要访问路由参数，请使用ActivatedRoute类。在下面的示例中，我们看到，当单击特定员工时，它会呈现 EmployeeDetailComponen t。当单击员工链接时，它会导航到EmployeesComponent。
文件名：employee-detail.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { switchMap } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { Employee } from '../employee/employee';
import { EmployeeService } from '../employee/employee.service';
@Component({
selector: 'app-employee-detail',
templateUrl: './employee-detail.component.html',
styleUrls: ['./employee-detail.component.css']
})
export class EmployeeDetailComponent implements OnInit, OnDestroy {
employee: Employee;
error: any;
sub: any;
constructor(private employeeService: EmployeeService, private route: ActivatedRoute) { }
ngOnInit() {
this.sub = this.route.paramMap.pipe(switchMap((params: ParamMap) =>
this.employeeService.getEmployee(+params.get('id')))).subscribe(employee => this.employee = employee);
}
ngOnDestroy() {
this.sub.unsubscribe();
}
goBack() {
window.history.back();
}
}
导入ActivatedRoute类来访问路由参数。通过构造函数将ActivatedRoute类注入到组件类中。ActivatedRoute类有一个paramMap可观察方法，用于保存路由参数。它有 switchMap ()方法来处理路由参数。ParamMap有一个get()方法来获取特定的参数值。
结论
在本指南中，我们探讨了如何在 Angular 中使用路由。我们还了解了如何使用routerlink和路由参数在应用程序中使用路由。
您可以在我的指南《在 Angular 中使用异步管道》中了解有关 Angular 的更多信息。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~