本文带大家了解一下Angular里的路由器（Routing），介绍一下路由器的最基本使用方法，看一下如何接受主要参数，希望能帮助到大家！
自然环境:
Angular CLI: 11.0.6
Angular: 11.0.7
Node: 12.18.3
npm : 6.14.6
IDE: Visual Studio Code
1. 引言
简单来说搜索框中，不一样地址（URL）对应不同的网页页面，这便是路由器。与此同时，点一下浏览器前行和倒退按键，电脑浏览器便会在您的浏览历史中往前或往后导航栏，这也是基于路由器。【有关实例教程强烈推荐：《angular教程》】
在 Angular 里边，Router 是一个单独的控制模块，界定在 @angular/router 模块中，
- Router 也可以使用 NgModule 开展模块延迟加载（懒加载）、预加载实际操作（参照《Angular入门到精通系列教程（11）- 模块(NgModule)，延迟加载模块》）；
- Router 会管理方法部件的生命周期，他会承担建立、消毁部件。
针对一个新的根据AngularCLI项目，复位时能通过选择项，将AppRoutingModule默认设置参与到app.component.ts中。
2. 路由器（Router）基本上使用方法
2.1. 提前准备
我们先建立2个界面，用以表明路由器的应用：
ng g c page1
ng g c page2
应用上边AnuglarCLI指令，建立Page1Component, Page2Component 2个部件。
2.2. 申请注册路由器
//src\app\app-routing.module.ts
const routes: Routes = [
{
path: 'page1',
component: Page1Component
},
{
path: 'page2',
component: Page2Component
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}能够看见，简单路由器申请注册，只需path和component2个特性，各自界定路由器的绝对路径，及其这一路由器的回应部件。
2.3. html中用法
<a routerLink="page1">Page1</a> |
<a routerLink="page2">Page2</a>
在html模版中，直接用routerLink特性，标志为angular的路由器。执行代码，能够看见 Page1和Page2 2个网页链接，点一下能够看见搜索框详细地址改成http://localhost:4200/page2或http://localhost:4200/page1， 页面内容在page1和page2中转换
2.4. ts 编码中用法
有时，应该根据ts里的领域模型，开展自动跳转。ts中，必须引入Router案例，如
constructor(private router: Router) {}跳转代码：
// 跳转 /page1
this.router.navigate(['/page1']);
// 跳转 /page1/123
this.router.navigate(['/page1', 123]);
3. 接受主要参数
3.1. 途径里的主要参数
一般来说，我们可以把主要参数做为url里的一段，如/users/1, 意味着查看id是1的消费者，路由器界定为"/users/id" 复古风格。
对于我们自己的简易网页页面，例如我们自己的page1网页页面能够传id主要参数，那样我们应该改动我们自己的routing为：
const routes: Routes = [
{
path: 'page1/:id', //接受id主要参数
component: Page1Component,
},
{
// 完成可选参数的小窍门。 这一routing解决并没有参数url
path: 'page1',
redirectTo: 'page1/', // 跳转'page1/:id'
},
{
path: 'page2',
component: Page2Component,
},
];ts编码载入主要参数时， 首先要引入ActivatedRoute，编码如下所示：
constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit(): void {
this.activatedRoute.paramMap.subscribe((params) => {
console.log('Parameter id: ', params.get('id'));
// 详细地址 http://localhost:4200/page1/33
// 控制台输出：Query Parameter name: 33
// 详细地址 http://localhost:4200/page1/
// 控制台输出：Query Parameter name: (具体结果显示undefined)
});
}3.2. 主要参数（QueryParameter）里的主要参数
主要参数也有另外一种书写，如http://localhost:4200/?name=cat, 即URL地点后，加一个问号’?’, 以后加上参数名和变量值（‘name=cat’）。这类称之为查询参数(QueryParameter)。
取这查询参数时，和之前的路由器主要参数相近，仅仅paramMap改成queryParamMap，编码如下所示：
this.activatedRoute.queryParamMap.subscribe((params) => {
console.log('Query Parameter name: ', params.get('name'));
// 详细地址 http://localhost:4200/page1?name=cat
// 控制台输出：Query Parameter name: cat
// 详细地址 http://localhost:4200/page1/
// 控制台输出：Query Parameter name: (具体结果显示undefined)
});4. URL途径显示格式
不同于传统的纯静态数据（html）网站，angular里的url并不是对应一个真实文档（网页页面），由于anuglar接手的路由器（Routing）解决，来确定表明那一个Component给终端产品用户。为了能对于不同的场景，angular的URL途径显示格式有2中：
http://localhost:4200/page1/123
http://localhost:4200/#/page1/123
默认设置是第一种，不用#的。必要时，还可以在app-routing.ts中，添加useHash: true, 如：
// app-routing.ts
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule],
})5. 布署中遇到的困难
一样，由于anuglar接手的路由器（Routing）解决，因此布署时，部署到iis, nginx这些服务器，都会有不同的方法（规定），详尽参照：
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
6. 汇总
angular默认设置不兼容可选择路由器（e.g. /user/:id?),但我们可以界定2个路由器，偏向同一个Component来达到这一，做到代码复用；（或使用redirectTo）
可以用useHash主要参数，完成augular途径前加一个#；
载入主要参数时，都要subscribe定阅一下，无法直接载入。
装包后布署难题，查询官方网wifi （https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode）
大量程序编写基本知识，请访问：编程视频！！
以上就是关于Angular学习之路由（Routing）浅谈的具体内容，大量欢迎关注AdminJS其他类似文章！