从路由中角度 4 的查询参数中获取数据答案

【问题标题】：Fetch data from query params in angular 4 in routing从路由中角度 4 的查询参数中获取数据
【发布时间】：2018-10-17 22:18:53
【问题描述】：

您好，我是 Angular 4 的新手，我正在创建一个商店页面，当用户点击牛仔裤链接时，它应该访问带有过滤后牛仔裤产品的商店页面。（如果您需要有关代码的更多信息，请告诉我，我可以添加。）

在 Home 组件中 -

<a [routerLink]="['/shop']">Jeans</a>
<a [routerLink]="['/shop']">Shirts</a>

我创建了一个商店组件并将路线指定为/shop。在我的商店组件中，我创建了从 - 获取数据的服务 -

import { Products } from './products';

export const PRODUCTS: Products[] = [
{
    id: 1,
    productCat:'Jeans',
    product: [
        {
            prodId: 1a;
            productName: 'Trendy Jeans',
        },
    ],
},
{
    id: 2,
    productCat:'Shirts',
    product: [
        {
            prodId: 1b;
            productName: 'Trendy Shirts',
        },
    ],
}
]

那么，在点击链接牛仔裤或衬衫数据后点击链接衬衫后，是否可以在角度路由中使用query params 或optional params 仅获取商店页面中的牛仔裤数据。如果不可能，请给我建议一种不同的方法。

【问题讨论】：

是的，您可以使用query params 发送数据。但是您必须处理数据（从列表中提取牛仔裤数据并添加到查询参数中）
嗨@AnuradhaGunasekara 非常感谢你，你能告诉我怎么做吗？您需要有关代码的更多信息吗？

标签： angular routing

【解决方案1】：

是的，查询参数以 angular 形式提供。您的链接可能如下所示：

<a [routerLink]="['/shop']" [queryParams]="{type: 'jeans'}">Jeans</a>
<a [routerLink]="['/shop']" [queryParams]="{type: 'shirt'}">Shirts</a>

在您的商店组件中访问 queryParams 如下所示：

this.activatedRoute.queryParams
      .flatMap(queryParams => {
        if (queryParams.type === 'shirt') {
           // get shirt
        } else if(queryParams.type === 'jeans') {
           // get jeans
        }
      })

【讨论】：

Hi ` if (queryParams.type === 'shirt') {` line 它给了我一个错误 - '(queryParams: Params) => void' 类型的参数不能分配给参数'(value: Params, index: number) => ObservableInput' 类型。我错过了什么
我认为你得到这个是因为.flatMap 期望你返回一个返回一个可观察对象的函数。我假设你会调用一个服务，它会返回一个可观察的衬衫或牛仔裤列表。如果不是这种情况，那么您应该能够将.flatMap 替换为.subscribe
嗨！谢谢或者这个@Crhistian Ramirez，你能帮我使用订阅获得以下[routerLink]="['/shop']" [queryParams]="{ type: 'jeans'}"的过滤器吗？我正在使用产品服务。欲了解更多信息productList: Products[]; 和ngOnInit this.productList = this.productservice.getProducts();

【解决方案2】：

在您的路线文件中。

{ path: 'shop/:data, component: ShopComponent }

然后在你的产品组件中，你有链接到商店组件，传递你想要的参数。

import { Router } from '@angular/router';

您的组件代码放在这里。并为链接点击功能添加这个。

this.router.navigate(['/project-details',data]);

此处的数据是您提取的数据。

并在您的产品组件构造函数或 ngOnInit 中为路由参数添加。

ngOnInit() {
    this.sub = this.route.params.subscribe((params) => {
      const data: params.data;
    });
  }

希望这会有所帮助。如果您需要了解有关角度路由和导航的更多信息，请关注 this 链接。

【讨论】：