angular2 路由

路由是个模块，命令行生成:ng generate module routerTest;

自己组建：

路由模块说明：

　　　Routes:路由配置，路由配置文件类型。比如：const routing:Routes =[{path: '',component:HomeComponent}];

　　　RouterOutlet:HTML 占位符，路由的模版将会在这个位置展现。

　　　RouterLink :HTML 中的路由链接，相当与angular1 的ui-serf。改变地址来转换不同的模块。

　　　Router ：执行路由对象的跳转和转跳，相当于angular1的$state.go。

　　　ActivatedRoute : 获取激活路由传入的参数。

1.创建路由文件，导入路由模块。在app文件夹下创建 app.router.ts文件，打开文件导入路由：

import {Routes,RouterModule} from "@angular/router";

2. 导入路由的组件

import {HomeComponent} from "./home/home.component";         //主页
import {PhoneComponent} from "./phone/phone.component";     // 联系我们页面
import {MapComponent} from "./map/map.component";　　　　　　　　//地图页面

3.配置路由：

const routing:Routes =[
  {path: '',component:HomeComponent},      
  {path: 'phone',component:PhoneComponent}, 
  {path: 'map',component:MapComponent}，
//找不到

{path: '**',component:HomeComponent}，

//重定向
{path:'',redirectTo:'/home',pathMatch:"full"}

];
4.初始化路由：

export const router = RouterModule.forRoot(routing);

或

@NgModule({
  imports:[RouterModule.forRoot(routing)],
  exports:[RouterModule],
  providers:[]
})
export class router{

}

5.在app.module.ts文件中导入以便执行：

import { router } from './app.router';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    MapComponent,
    PhoneComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    router       //导入
  ],
  providers: [],
  bootstrap: [AppComponent]
})

6.页面路由配置

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand">
        在线竞拍
      </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav ">
        <li role="presentation" [class.active]="isActive == 1" (click)="isActive = 1"><a [routerLink]="['/']">关于我们</a></li>
        <li role="presentation" [class.active]="isActive == 2" (click)="isActive = 2"><a [routerLink]="['/phone']">联系我们</a></li>
        <li role="presentation" [class.active]="isActive == 3" (click)="isActive = 3"><a [routerLink]="['/map']">网站地图</a></li>
      </ul>
    </div>
  </div>
</nav>
<router-outlet></router-outlet>

7.事件点击跳转，如angualr1的$state.go
import {Router} from "@angular/router"
constructor(private router:Router){

}
toGoDetail(){
　　this.router.navigate(['/phone']);
}

8.路由传参三种方式：

const routing:Routes =[
  {path: '',component:HomeComponent},
  {path: 'phone/:person/:name',component:PhoneComponent},
  {path: 'map',component:MapComponent}
];

<li role="presentation" [class.active]="isActive == 1" (click)="isActive = 1"><a [routerLink]="['/']">关于我们</a></li>
<li role="presentation" [class.active]="isActive == 2" (click)="isActive = 2"><a [routerLink]="['/phone',1,2]">联系我们</a></li>
<li role="presentation" [class.active]="isActive == 3" (click)="isActive = 3"><a [routerLink]="['/map']">网站地图</a></li>

或或或

const routing:Routes =[
  {path: '',component:HomeComponent},
  {path: 'phone/:person/:name',component:PhoneComponent},
  {path: 'map',component:MapComponent}
];

<li role="presentation" [class.active]="isActive == 1" (click)="isActive = 1"><a [routerLink]="['/']">关于我们</a></li>
<li role="presentation" [class.active]="isActive == 2" (click)="isActive = 2"><a [routerLink]="['/phone/1/2']">联系我们</a></li>
<li role="presentation" [class.active]="isActive == 3" (click)="isActive = 3"><a [routerLink]="['/map']">网站地图</a></li>

或或或

{path: '',component:HomeComponent},
{path: 'phone',component:PhoneComponent,data:[{person:1,name:2}]},
{path: 'map',component:MapComponent}

9.页面参数接收
import {AcrivatedRoute} from "@angular/router"

constructor(private route:ActivatedRoute){
　//route.snapshot 传入的参数对象 需答应出来，不同传法，值不太一样

}
10.配置子路由

app.router.ts:

import { NgModule } from '@angular/core';
import {Routes,RouterModule} from "@angular/router";
import {HomeComponent} from "./home/home.component";
import {PhoneComponent} from "./phone/phone.component";
import {MapComponent} from "./map/map.component";
import {ProductComponent} from "./product/product.component";
import {CarouselComponent} from "./carousel/carousel.component";

const routing:Routes =[
  {path:'',redirectTo:'/home',pathMatch:"full"},
  {path: 'home',component:HomeComponent},
  {path: 'phone',component:PhoneComponent,data:[{person:1,name:2}],
    children:[
      {path:'',component:CarouselComponent},
      {path:'detail',component:ProductComponent}
    ]
  },
  {path: 'map',component:MapComponent},
  {path: '**',component:HomeComponent}
];
@NgModule({
  imports:[RouterModule.forRoot(routing)],
  exports:[RouterModule],
  providers:[]
})
export class router{

}
/*export const router = RouterModule.forRoot(routing);*/

<a [routerLink]="['./detail']">详情</a>

<a [routerLink]="['./']">商品</a>

<router-outlet></router-outlet>

　　11.辅助路由，相当于tab切换，并不改变主路由

const routing:Routes =[
  {path:'',redirectTo:'/home',pathMatch:"full"},
  {path: 'home',component:HomeComponent},
  {path: 'phone',component:PhoneComponent,data:[{person:1,name:2}],
    children:[
      {path:'',component:CarouselComponent},
      {path:'detail',component:ProductComponent}
    ]
  },
  {path: 'map',component:MapComponent},

//挂载在name为copy的<router-outlet name="copy"></router-outlet>的地方

  {path: 'picture',component:CarouselComponent,outlet:'copy'},
  {path: 'product',component:ProductComponent,outlet:'copy'},
  {path: '**',component:HomeComponent}
];

HTML：
<div class="container">
  <ul class="nav navbar-nav ">
    <li role="presentation" ><a [routerLink]="[{outlets:{copy:'picture'}}]">轮播图</a></li>
    <li role="presentation" ><a [routerLink]="[{outlets:{copy:'product'}}]">联系我们</a></li>
  </ul>
</div>
<router-outlet name="copy"></router-outlet>

　　12.组件的第二种导入方式，通过路由致使在app.module.ts文件中不需要在申明所有的组件，被路由的组件可以在路由模块文件中申明：