一、Routers(路由配置),接收一个路由配置数组。
- path : 一个字符串用来匹配DSL@H_301_8@
- patchMatch : 指定匹配策略@H_301_8@
- component : 组件名@H_301_8@
- redirectTo : 路由重定位@H_301_8@
- outlet : 将组件放置在视图中指定outlet中。@H_301_8@
- canActivate : 一组DI令牌,用来查找CanActivate处理器。@H_301_8@
- canActivateChild : 一组DI令牌,用来查找CanActivateChild处理器。@H_301_8@
- canDeactivate : 一组DI令牌,用来查找CanDeactivate处理器。@H_301_8@
- data : 通过ActivateRoute向组件传递额外的数据。@H_301_8@
- resolve : 一组DI令牌,用来查找Resolve处理器。@H_301_8@
- loadChildren:子菜单连接的路由配置文件@H_301_8@
- children : 一组子路由定义@H_301_8@
实例:
app-routing.module.ts配置:
const AppRoutes: Routes = [ {path: '',redirectTo: '/app/dashboard',pathMatch: 'full'},//页面启动首页显示 {path: 'app',component: LayoutComponent},{path: 'demoHouseList',component: HouseListComponent},{path: 'houseMarket',loadChildren: './house-market/houseMarket.module#HouseMarketModule'}//houseMarket后面还要子菜单,在houseMarket-routing.module配置中
houseMarket-routing.module.ts配置:
const Routing: Routes = [ { path: '',component: HouseMarketComponent,children: [ {path: 'list',component: ListComponent},{path: 'search',component: SearchComponent} ] } ];
页面访问:
首页启动路径:http://localhost:4200/#/app/dashboard
内页:http://localhost:4200/#/houseMarket/list
二、指令
RouterOutlet--相当于一个占位符,在Angular中根据路由状态动态插入视图。
如何使用
<router-outlet></router-outlet> <router-outlet name='left'></router-outlet> <router-outlet name='right'></router-outlet>
一个路由插座可以在任何时候组件实例化时发出一个activate消息,并且在组件销毁时发出一个deactivate消息。
<router-outlet (activate)="onActivate($event)" (deactivate)="onDeactivate($event)"></route-outlet>
RouterLink指令能够链接到应用中指定区域。如果使用静态链接,可以像下面这样直接使用:
<a routerLink='/user'>link to user component</a>
如果是动态生成的链接,可以传递一个数组带有路径片段,以及后续每一个参数的片段。
例如 ['/team',teamId,'user',userName,{details:true}],表示我们想要链接到地址 /team/11/user/bob;details=true
多个静态片段可以合并到一个(示例:['/team/11/user'],username,{details: true})
第一个片段名可以使用/,./,或者 ../ 开关:
- 如果片段以 / 开始,路由器会以应用的根路由查找起点@H_301_8@
- 如果片段以 ./ 开始,或者不以斜线开始中,路由器会从当前路由的子节点路径开始查找@H_301_8@
- 如果片段以 ../ 路由会从上一级节点为查询路径@H_301_8@
使用以下方式设置查询参数和片段
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">link to user component</a>
这会生成链接 /user/bob#education?debug=true
三、接口
ActivatedRoute(当前激活路由对象,主要用于保存路由,获取路由传递的参数。)
如何使用
@Component({templateUrl:'./my-component.html'}) class MyComponent { constructor(**route: ActivatedRoute**) { const id: Observable<string> = route.params.map(p => p.id); const url: Observable<string> = route.url.map(s => s.join('')); const user = route.data.map(d => d.user); //includes `data` and `resolve` } }
类定义
interface ActivatedRoute { snapshot : ActivatedRouteSnapshot url : Observable<UrlSegment[]> params : Observable<Params> queryParams : Observable<Params> fragment : Observable<string> data : Observable<Data> outlet : string component : Type<any>|string routeConfig : Route root : ActivatedRoute parent : ActivatedRoute firstChild : ActivatedRoute children : ActivatedRoute[] pathFromRoot : ActivatedRoute[] toString() : string }
- snapshot : ActivatedRouteSnapshot 当前路由快照@H_301_8@
- url : Observable<urlsegment[]> 当前路由匹配的URL片段。@H_301_8@
- params : Observable<Params> 当前路由的矩阵参数@H_301_8@
- queryParams : Observable<Params> 所有路由共享的查询参数@H_301_8@
- fragment : Observable<string> 所有路由共享的URL片段@H_301_8@
- data :Observable<Data> 当前路由的静态或者动态解析的数据@H_301_8@
- outlet: string 当前路由插座的名称。一个常量值。@H_301_8@
- component : Type<any>|string 路由对应的组件。一个常量值。@H_301_8@
- routeConfig : Route 当前路由状态树的根节点@H_301_8@
- root : ActivatedRoute 根路由@H_301_8@
- parent : ActivatedRoute 当前路由在状态树中的父节点@H_301_8@
- firstChild: ActivatedRoute 当前路由的第一个子节点@H_301_8@
- children : ActivatedRoute 当前路由在路由状态树中的所有子节点@H_301_8@
- pathFromRoot : ActivatedRoute 根节点到当前节点的路径@H_301_8@
- toString() : string@H_301_8@
传递参数方式,以及ActivatedRoute获取他们的方式
1、在查询参数中传递数据:
/product?id=1&name=2 //传参
=>ActivatedRoute.queryParams[id] //获取参数
2、在路由路径中传递数据:
{path:'/product/:id'} //路由配置
=>/product/1 //路由显示方式
=>ActivatedRoute.params[id] //获取参数
3、在路由配置中传递数据
{path:'/product',component:ProductComponent,data:[{isProd:true}]} //路由配置
=>ActivatedRoute.data0 //获取参数
接收参数:
import {ActivatedRoute,Router} from '@angular/router'; export class HousedetailComponent implements OnInit { houseMarketId: any; constructor(private route: ActivatedRoute){} ngOnInit() { this.houseMarketId = this.route.snapshot.params('id');或 this.houseMarketId = this.route.snapshot.paramMap.get('id'); } }
现已list列表页点击跳转到详情页来实例ActivatedRoute用法:
在路由路径中传递数据:{path: 'detail/:id',component: detailComponent}
一、list.component.ts和detail.component.ts文件都引入
import {ActivatedRoute,Router} from '@angular/router'; constructor(private route: ActivatedRoute,private router: Router){ }
二、list.component.ts中的点击事件:
goDetail(houseMarketId) { const url = '/detail/' + houseMarketId; let queryParams; queryParams = {source: 'list'}; this.router.navigate([url],{relativeTo: this.route,queryParams: queryParams}); }
访问路径:http://localhost:400/detail/e028606e317c11e896ef7cd30adbbf4c?source=list
三、detail.component.ts在初始化时,取的url路由带过来的id值,来取该id对应信息,即:this.route.snapshot.paramMap.get('id')
ngOnInit() { this.houseMarketId = this.route.snapshot.paramMap.get('id'); this.housedetailService.getById(this.houseMarketId,this.userId ? this.userId : '') .then((data) => { if (data.code === 200) { this.houseMarket = data.data; } }); }