Angular 2路由到带有管道集的页面

Question

我有一个包含品牌列表的页面，然后是另一个包含从服务中引入的每个品牌的所有产品的页面。可以使用管道按品牌过滤产品页面。我想做的很简单。

从包含品牌列表的页面中，我希望能够通过单击品牌链接转到过滤后的产品页面。这是一般产品页面，但已在品牌上设置了过滤器。我也希望能够在我在那里时更改过滤器。

例如，我在页面上有一个鞋品牌列表： 阿迪达斯、耐克、彪马、锐步 当我点击阿迪达斯时，它会将我带到动态产品页面，其中包含阿迪达斯鞋子过滤的内容。但是如果我想看耐克鞋，我可以在我所在的产品页面顶部更改过滤器，让它按耐克鞋过滤。

到目前为止，我已经浏览了 Angular.io 文档和 Meteor 教程，但没有成功。我已经尝试在链接（routerlink="['/product-page, product.brand']"）中传递参数并设置激活路由，但我不确定它是否适用于此。 有什么想法吗？

品牌页面上的链接

<a [routerLink]="['/product-page']">
  <div class="packs adidas">
    <!--<p>ADIDAS</p>-->
  </div>
</a>

过滤标记

 <div class="filter">
  <label for="filter">FILTER</label>
  <div class="select-arrows-wrapper">
    <select name="filter" id="brand-filter" [(ngModel)]="productName">
      <option [value]="null">All Brands</option>
      <option *ngFor="let product of products | async | duplicate:'productId'" [value]="product.productName">{{product.productName}}</option>
    </select>
  </div>
</div> <!--end filter-->

相关路线

{path: 'customer-brands', component: CustomerBrandsComponent},
{path: 'product-page', component: ProductPageComponent},

Answer 1

将品牌 ID 添加到您的产品页面路径，然后读取您的 ProductPageComponent 中的 ID。

例如：

{path: 'product-page/:brand', component: ProductPageComponent}

然后，在您的 ProductPageComponent 中，将 ActivatedRoute 注入构造函数，并检索 ID，如下所示：

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

public brand string;

constructor(private route: ActivatedRoute) {
        this.brand = route.snapshot.params['brand']);
}

您现在可以使用变量brand 来过滤您的数据。

您还需要更改您的 routerLink，以便将品牌附加到 url 的末尾 - 例如：

<a [routerLink] ="['/product-page/' + product.brand]">Test</a>