angular路由的配置以及跳转

标签：angular   link   const   style   route   mod   redirect   size   this   

1. 首先创建项目的时候就可以配置路由   cd到你的目录下 输入 ng new 项目名称 --routing 就可以创建项目并配置路由

2. 在app-routing.module.ts 里面配置路由  列如：

　　　　首先要先引入组件

　　　　import { NewsComponent } from ‘./components/news/news.component‘;

　　　   import { HomeComponent } from ‘./components/home/home.component‘;

　　　　然后配置

　　　　const routes: Routes = [

　　　　　　　　 { path: ‘home‘, component:HomeComponent  },

　　　　　　　　 { path: ‘news‘, component:NewsComponent }

　　　　]

默认跳转路由可以这样写  { path: ‘‘, redirectTo: ‘/home‘, pathMatch: ‘full‘ }

3.  路由的跳转 

　　　<a routerLink ="/home">首页</a>

　　　<a routerLink ="/news">新闻</a>

4. routerLinkActive 设置 routerLink 默认选中路由

　　<a routerLink ="/home" routerLinkActive=”active”>首页</a>

　　并且可以给他设置样式

　　.active{ color:red; }

5. js 跳转 

　　首先引入 ： import { Router } from  ‘@angular/router‘;

　　初始化 ： constructor( private router: Router ) { }

　　js路由的跳转：this.router.navigate([ ‘/news‘ ]);  或者  this.router.navigate([‘/news‘, hero.id]);

angular路由的配置以及跳转

标签：angular   link   const   style   route   mod   redirect   size   this   

原文地址：http://www.cnblogs.com/abcurry/p/7909810.html