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

Question

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

从包含品牌列表的页面中，我希望能够通过单击品牌 link 转到过滤后的产品页面。这是一般产品页面，但已经在品牌上设置了过滤器。我也想在现场更换过滤器。

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

我已经查看了 Angular.io 文档和 Meteor 教程，但到目前为止没有成功。我尝试在 link (routerlink="['/product-page, product.brand']") 中传递参数并设置 activatedRoute，但我不确定它是否适用于此处。有什么想法吗？

Link 在品牌页面上

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

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

Angular 2 routing to page with pipe set

angular2-directives

angular2-routing

angular