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]);

 

 

---

路由 get 传值 js 跳转

 

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