angular中的动态路由

1.配置动态路由

const routes: Routes = [
  {path: ‘home‘, component: HomeComponent},
  {path: ‘news‘, component: NewsComponent},
  {path: ‘newscontent/:id‘, component: NewscontentComponent},
  {
    path: ‘‘,
    redirectTo: ‘/home‘,
    pathMatch: ‘full‘
} ];

2.跳转传值

<a [routerLink]="[ ‘/newscontent/‘,aid]">跳转到详情</a> <a routerLink="/newscontent/{{aid}}">跳转到详情</a>

3.获取动态路由的值

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

   constructor( private route: ActivatedRoute) { }

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

动态路由的 js 跳转

1. 引入

import { Router } from ‘@angular/router‘;

2.初始化

xport class HomeComponent implements OnInit { constructor(private router: Router) {
}
  ngOnInit() {
  }
goNews(){
// this.router.navigate([‘/news‘, hero.id]);
     this.router.navigate([‘/news‘]);
  }
}

3.路由跳转

this.router.navigate([‘/news‘, hero.id]);

1. 引入 NavigationExtras

import { Router ,NavigationExtras} from ‘@angular/router‘;

2.定义一个 goNewsContent 方法执行跳转，用 NavigationExtras 配置传参。

goNewsContent(){
     let navigationExtras: NavigationExtras = {
       queryParams: { ‘session_id‘: ‘123‘ },
       fragment: ‘anchor‘
};
     this.router.navigate([‘/news‘],navigationExtras);
  }

3.获取 get 传值

   constructor(private route: ActivatedRoute) {
     console.log(this.route.queryParams);
}

原文地址：https://www.cnblogs.com/loaderman/p/10912198.html