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

论坛 期权论坛 编程之家     
选择匿名的用户   2021-6-2 16:44   1461   0

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

interface ActivatedRoute {

snapshot: ActivatedRouteSnapshot

url: Observable

params: Observable

queryParams: Observable

fragment: Observable

data: Observable

outlet: string

component: Type | 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

get queryParamMap: Observable

toString(): string

}

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

注入使用如下:

@Component({...})

class MyComponent {

constructor(private route: ActivatedRoute) {

const id: Observable = route.params.map(p => p.id); //获取参数

const url: Observable = route.url.map(segments => segments.join('')); //获取拼接的url

const user = route.data.map(d => d.user); //获取数据

}

}

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP