angular获取路由参数,angularjs路由原理
本文带你了解Angular中的路由，介绍路由的基本用法以及如何接收参数。希望对你有帮助！
1. 摘要
简单来说，在地址栏中，不同的地址(URL)对应不同的页面。这是路由。同时点击浏览器的前进和后退按钮，浏览器会在你的浏览历史中向前或向后导航，这也是基于路由的。【相关教程推荐：《angular教程》】
在Angular中，路由器是一个独立的模块，定义在@angular/router模块中。
路由器可以配合NgModule进行模块的延迟加载(懒人加载)和预加载(参考《Angular入门到精通系列教程（11）- 模块(NgModule)，延迟加载模块》)；路由器管理组件的生命周期，它负责创建和销毁组件。对于一个新的基于AngularCLI的项目，默认情况下，可以在初始化期间通过选项将AppRoutingModule添加到app.component.ts中。
2. 路由（Router）基本用法
2.1. 准备
首先，我们创建2页来解释路由的使用：
ng g c第1页
Ng g c page2使用上面的AnuglarCLI命令创建page1component和page2component。
2.2. 注册路由
//src \ app \ app-routing . module . ts
const routes: Routes=[
{
路径：“第1页”，
组件：第1页组件
},
{
路径：“第2页”，
组件：第2页组件
},
];
@NgModule({
导入：[RouterModule.forRoot(routes)]，
导出：[RouterModule]，
})
可以看到，简单的路由注册只需要path和component两个属性，分别定义路由的相对路径和这个路由的响应组件。
2.3. html中的用法
a routerLink=page1Page1/a
A routerLink=page2Page2/a在html模板中，直接使用routerLink属性将路线标识为角度。执行代码，可以看到两个超链接，Page1和Page2。点击可以看到地址栏地址改为http://localhost:4200/page2或者3358 localhost: 4200/page1，页面内容在page1和page2之间切换。
2.4. ts 代码中的用法
有时候，需要根据ts中的业务逻辑进行跳转。Ts，需要注入路由器实例，比如
构造器(私有路由器：路由器){}跳转代码：
//跳转到/page1
this . router . navigate([/page 1 ])；
//跳转到/page1/123
this.router.navigate([/page1 ，123])；
3. 接收参数
3.1. 路径中的参数
一般来说，我们使用参数作为url中的一个段，比如/users/1，代表查询id为1的用户，路由定义为/users/id 。
例如，对于我们的简单页面，我们的page1页面可以传递id参数，那么我们需要将我们的路由修改为：
const routes: Routes=[
{
Path: page1/:id ，//接收id参数
组件：page 1组件，
},
{
//实现可选参数的提示。这个路由处理没有参数的URL。
路径：“第1页”，
重定向到：“page1/”，//跳转到“page1/:id”
},
{
路径：“第2页”，
组件：page 2组件，
},
];ts代码读取参数时，需要先注入ActivatedRoute。代码如下：
构造函数(私有activated route:activated route){ }
ngOnInit(): void {
this . activated route . param map . subscribe((params)={
console.log(参数id:，params . get( id ))；
//地址http://localhost:4200/page1/33
//控制台输出：查询参数名称：33
//地址http://localhost:4200/page1/
//控制台输出：查询参数名称：(实际结果未定义)
});
}3.2. 参数（QueryParameter）中的参数
还有另外一种方式来写参数，比如http://localhost:4200/？Name=cat，就是在URL地址后面加一个问号？然后添加参数名和参数值( name=cat )。这称为查询参数。
此查询参数类似于前面的路由参数，只是paramMap更改为queryParamMap，代码如下：
this . activated route . query param map . subscribe((params)={
console.log(查询参数名称： ，params.get(名称))；
//地址http://localhost:4200/page1？名称=猫
//控制台输出：查询参数名称：cat
//地址http://localhost:4200/page1/
//控制台输出：查询参数名称：(实际结果未定义)
});
4. URL路径显示格式
与传统的纯静态(html)站点不同，angular中的url并不对应于一个真实的文件(页面)，因为anuglar接管路由处理来决定向最终用户显示哪个组件。对于不同的场景，angular的URL路径显示格式如下：
http://localhost:4200/page1/123
http://localhost:4200/#/page 1/123
默认是第一个，不带#。如果需要，可以在app-routing.ts中添加useHash: true，比如：
//app-routing.ts
@NgModule({
imports:[router module . for root(routes，{ useHash: true })]，
导出：[RouterModule]，
})
5. 部署中遇到的问题
同样，由于anuglar接手的路由过程，部署到iis、nginx等服务器时会有不同的技能(要求)。请参考：
https://github . com/angular-ui/ui-router/wiki/常见问题#如何配置您的服务器以使用html 5模式工作
6. 总结
angular默认情况下不支持可选路由(例如/user/:id？)，但我们可以定义两条路线，指向同一个组件来实现这一点，实现代码重用；(或使用重定向)
在实现通用路径之前，可以使用useHash参数添加一个#;
读取参数时需要订阅，但不能直接读取。
检查官方WiFi(https://github . com/angular-ui/ui-router/wiki/FAQ-asked-questions # how-to-configure-your-server-to-work-with-html 5 mode)的部署后问题。
有关编程的更多信息，请访问：编程视频！以上是角度学习中路由分析的详细内容。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。