Question

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

在主页组件中 -

<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在点击链接衬衫后克隆链接牛仔裤或衬衫数据后，仅在商店页面中获取牛仔裤数据。如果不可能，请你给我一个不同的方法。

Answer 1

在路线档案中。

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

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

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

您的组件代码就在这里。对于链接点击功能，添加此内容。

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

这里的数据是您提取的数据。

在您的产品组件构造函数或ngOnInit sunscribe for route params。

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

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

Answer 2

是的，查询参数有角度可用。您的链接可能如下所示：

<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
        }
      })

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

2 个答案: