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文件中不需要在申明所有的组件,被路由的组件可以在路由模块文件中申明: