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中看到傳遞的參數