angular 路由 Router

一、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;
        }
      });
}

参考：https://www.kancloud.cn/wujie...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!