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