Angular 5获取当前的路由url及参数

获取当前加载组件的路由信息可以使用ActivatedRoute。ActivatedRoute接口如下:

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 | null
  get routeConfig: Route | null
  get root: ActivatedRoute
  get parent: ActivatedRoute | null
  get firstChild: ActivatedRoute | null
  get children: ActivatedRoute[]
  get pathFromRoot: ActivatedRoute[]
  get paramMap: Observable<ParamMap>
  get queryParamMap: Observable<ParamMap>
  toString(): string
}

可以看到ActivatedRoute提供了url,params,queryParams等。ActivatedRoute这几个属性返回的是Observable,它是可以用来监控url,参数的变化。

注入使用如下:

@Component({...})
class MyComponent {
  constructor(private route: ActivatedRoute) {
    const id: Observable<string> = route.params.map(p => p.id);   //获取参数
    const url: Observable<string> = route.url.map(segments => segments.join('')); //获取拼接的url
    const user = route.data.map(d => d.user); //获取数据
  }
}

版权声明:著作权归作者所有。

相关推荐

Vue路由传递获取参数

通过Vue传递参数可以分为两种方式:params参数query参数params参数params参数传递方式分两种:路由配置参数使用$router的push编程式添加路由配置参数在路由中配置如下:{   path: '/user/:id',   name: 'user',   component: UserDe

Angular4 监听路由URL的变化

Angular 4检测路由变化,可以使用router.events来监听:支持的事件类型:NavigationStart:导航开始NavigationEnd:导航结束NavigationCancel:取消导航NavigationError:导航出错RoutesRecoginzed:路由已认证在判断事件类型需要导入对应的事件类型,如:import { Router,&n

Python获取当前时间

datatime模块now()使用datetime.now()获取当前日期和时间>>> import datetime >>> datetime.datetime.now() datetime(2017, 12, 27, 21, 39, 24, 676972) 仅返回日期&

使用Angular CLI的6个最佳实践及专业技巧

我们在新建前端项目时,常常会为项目的代码结构以及技术选型(如gunt,gulp,webpack,systemjs等等)绞尽脑汁。Angular CLI为我们开发Angular应用提供了一个标准的项目模板。项目模板里包含了完整的测试:包括unit测试,e2e测试多环境构建,提供了develop和production这两种基本的构建还提供了一系列代码开发工具,如ng generat

Angular 5:HttpClient的基本用法

Angular 4.3引入了新的用于http请求的接口HttpClient。它旨在替换之前版本的接口Http。有以下新特性:对响应的body做类型检查默认返回的是JSON对象,不再需要使用json()显式解析返回的数据支持拦截器支持进度事件请求后验证和基于刷新的测试框架安装HttpClientModuleHttpClient属于@angular/common/http包的模块HttpCl

[译]Angular 5:升级和新功能的总结

代号为pentagonal-donut的Angular 5刚刚发布,它带来了一些新功能以及一些内部变化,这些会让Angular应用变得更小,执行变得更快。 在这篇文章中,我们将简要介绍一些最重要的变化以及升级指南。 有关更多详细信息,请参阅公告博客帖子,有关所有更改的详细信息,请参阅官方更新日志。性能这是Angular 5包含的一些改变,它会让你的应用变得更