一、Routers(路由配置),接收一个路由配置数组。
属性
- path : 一个字符串用来匹配DSL
- patchMatch : 指定匹配策略
- component : 组件名
- redirectTo : 路由重定位
- outlet : 将组件放置在视图中指定outlet中。
- canActivate : 一组DI令牌,用来查找CanActivate处理器。
- canActivateChild : 一组DI令牌,用来查找CanActivateChild处理器。
- canDeactivate : 一组DI令牌,用来查找CanDeactivate处理器。
- data : 通过ActivateRoute向组件传递额外的数据。
- resolve : 一组DI令牌,用来查找Resolve处理器。
- loadChildren:子菜单连接的路由配置文件
- children : 一组子路由定义
实例:
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})
第一个片段名可以使用/, ./, 或者 ../ 开关:
- 如果片段以 / 开始,路由器会以应用的根路由查找起点
- 如果片段以 ./ 开始,或者不以斜线开始中,路由器会从当前路由的子节点路径开始查找
- 如果片段以 ../ 路由会从上一级节点为查询路径
使用以下方式设置查询参数和片段
<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 当前路由快照
- url : Observable<urlsegment[]> 当前路由匹配的URL片段。
- params : Observable<Params> 当前路由的矩阵参数
- queryParams : Observable<Params> 所有路由共享的查询参数
- fragment : Observable<string> 所有路由共享的URL片段
- data :Observable<Data> 当前路由的静态或者动态解析的数据
- outlet: string 当前路由插座的名称。一个常量值。
- component : Type<any>|string 路由对应的组件。一个常量值。
- routeConfig : Route 当前路由状态树的根节点
- root : ActivatedRoute 根路由
- parent : ActivatedRoute 当前路由在状态树中的父节点
- firstChild: ActivatedRoute 当前路由的第一个子节点
- children : ActivatedRoute 当前路由在路由状态树中的所有子节点
- pathFromRoot : ActivatedRoute 根节点到当前节点的路径
- toString() : string
传递参数方式,以及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;
}
});
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。