Angular配置路由以及动态路由取值传值跳转

Angular配置路由

1、找到 app-routing.module.ts 配置路由

引入组件

import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';

配置路由

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

找到 app.component.html 根组件模板，配置 router-outlet 显示动态加载的路由

<h1>
    <a routerLink="/home">首页</a>
    <a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet>

 

Angular routerLinkActive设置routerLink 默认选中路由

<h1>
<a [routerLink]="[ '/home' ]" routerLinkActive="active">首页</a>
<a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a>
</h1>

 

 

动态路由传值与取值

跳转传值

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

获取动态路由的值

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

constructor( private route: ActivatedRoute) {
}
public id: Number;
ngOnInit() {
    console.log(this.route.params);
    this.route.params.subscribe(data=>this.id=data.id);
}

 

动态路由的 js 跳转

import { Router } from '@angular/router

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