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

场景

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

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

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

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通过以上搭建起Angular项目。

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

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
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先在新闻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}
];

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

<ul>
    <li *ngFor = "let item of list;let key=index;">
        <a [routerLink]="['/newsdetail/',key]" >{{key}}--{{item}}</a>
    </li>
</ul>

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

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

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

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

然后去声明

constructor(public route:ActivatedRoute) { }

最后获取传递的参数

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

就可以获取到传递的参数

 

 

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