标签：rect news layout col lib lin console ini nts
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); }
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); }
标签：rect news layout col lib lin console ini nts
原文地址：https://www.cnblogs.com/loaderman/p/10912198.html
