Question

设想一种情况，我们只有一个组件，必须根据传入的不同url参数以不同的方式填充数据。

也就是说，请考虑以下网址格式：

1. http://localhost:4200/venues/5760665662783488 
2. http://localhost:4200/users/2gjmXELwGYN6khZgzaeWKmLtIDt2 
3. http://localhost:4200/revenue

在组件内，如果我使用ActivatedRouteSnapshot接口记录传入URL的参数，则会得到以下结果：

1. {venueid: "5760665662783488"}
2. {userid: "2gjmXELwGYN6khZgzaeWKmLtIDt2"}
3. {}

现在，如果我想基于上述三个不同的url参数以三种不同的方式填充单个组件的字段，怎么办？

我的意思是如何为传入的场所ID /用户ID / {}填充不同的内容？在ActivatedRouteSnapshot接口上是否有一种方法可以检查params对象的键？

我尝试浏览了ActivatedRouteSnapshot接口的文档，但没有找到答案。

我的代码片段以记录url参数： console.log(this.activatedRoute.snapshot.params);

如果数量很少，我想学习实现此功能的不同方法。预先感谢。

Answer 1

ActivatedRouteSnapshot具有paramMap属性，而ParamMap类具有.has(paramName)方法。

  if(myActivatedRouteSnapshot.paramMap.has('userid')) {
    ...
  }

myActivatedRouteSnapshot是您所说的ActivatedRouteSnapshot。

https://angular.io/api/router/ActivatedRouteSnapshot#paramMap https://angular.io/api/router/ParamMap

Answer 2

您可以使用paramMap的ActivatedRouteSnapshot属性，该属性返回一个ParamMap对象，该对象也具有属性keys。

因此要记录使用的参数键：

console.log(this.activatedRoute.snapshot.paramMap.keys);

Answer 3

我尝试过这个。

const obj = this.activatedRoute.snapshot.params;
    if (Object.keys(obj)[0] === 'venueid') {
      console.log('venueid match'); // load venueid data for the component
    } else if(Object.keys(obj)[0] === 'userid') {
      console.log('userid match'); // load userid data for the component
    } else {
      console.log('other match'); // load other data for the component
    }

但是@AlesD和@Robin De Schepper的回答似乎更加复杂。所以我会和他们一起去。

如何使用ActivatedRouteSnapshot的params属性在组件中以不同方式填充数据

3 个答案: