Angular中实现动态路由跳转并传递参数

╰+攻爆jí腚メ 2023-10-06 05:27 6阅读 0赞

## 场景 ##

Angular介绍、安装Angular Cli、创建Angular项目入门教程：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/105570017 ][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105570017]

Angular新建组件以及组件之间的调用：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/105694997][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105694997]

通过以上搭建起Angular项目。

Angular中的路由配置、路由重定向、默认选中路由：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/106182994][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_106182994]

通过上面了解了路由配置后，要实现路由跳转并传值，比如在新闻页面点击某条新闻跳转到新闻详情并将当前新闻的id传递过去。

如果想通过get传值的方式实现可以参考下面：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/106203220][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_106203220]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi ][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

首先在新闻news组件中声明一个空数组并赋一些值

public list:any[] = [];

在初始化方法中赋值

ngOnInit(): void {
        for(var i=0;i<10;i++)
        {
          this.list.push("这是第"+i+"条数据");
        }
      }

然后在app.routing.module.ts中引入新闻详情的组件

import {NewsdetailComponent} from './components/newsdetail/newsdetail.component';

并设置新闻详情的动态路由

const routes: Routes = [
      {path:'newsdetail/:id',component:NewsdetailComponent}
    ];

然后在新闻页面中添加跳转链接

通过第二个参数将当前新闻的索引进行传递参数。

那么怎样在新闻详情页接收这个参数。

首先在新闻详情页引入ActivatedRoute模块

import {ActivatedRoute} from '@angular/router';

然后去声明

constructor(public route:ActivatedRoute) { }

最后获取传递的参数

ngOnInit(): void {
        this.route.params.subscribe((data)=>{
          console.log(data);
        });
      }

就可以获取到传递的参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

这样就能通过动态路由的方式获取到传递的参数，可以在url中看到传递的参数

![20200518225113840.gif][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105570017]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_105694997]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_106182994]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106182994
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_106203220]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106203220
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200518225108516.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[20200518225113840.gif]: https://img-blog.csdnimg.cn/20200518225113840.gif