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

获取当前加载组件的路由信息可以使用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); //获取数据

}

}