angular 路由 Router

前端之家收集整理的这篇文章主要介绍了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...

原文链接:https://www.f2er.com/angularjs/144622.html

猜你在找的Angularjs相关文章