Angular 2使用管道路由到頁面

-1

我有一個包含品牌列表的頁面，然後是包含從服務中引入的每個品牌所有產品的另一個頁面。產品頁面可以用管道按品牌進行過濾。我想要做的事很簡單。Angular 2使用管道路由到頁面

從品牌列表頁面，點擊品牌鏈接，我希望能夠進入過濾產品頁面。這是一般產品頁面，但過濾器已在品牌上設置。我希望能夠在我在那裏時更換過濾器。

例如，我有一個頁面上鞋品牌列表：阿迪達斯，耐克，彪馬，銳步當我點擊阿迪達斯，它帶我到動態產品頁面與阿迪達斯運動鞋過濾的內容。但是如果我想看看耐克鞋，我可以更換我正在使用的產品頁面頂部的過濾器，並通過耐克鞋進行過濾。

我已經瀏覽了Angular.io文檔和流星教程，迄今爲止沒有成功。我嘗試過在鏈接中傳遞參數（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},

來源

2016-08-03 Patrick

請張貼演示你已經嘗試了代碼，並在那裏你失敗了。 –

你看過angular2在其網站上的第一個教程嗎？這就是所謂的英雄教程，它正是你想要的。看看https://angular.io/docs/ts/latest/tutorial/ – jprivillaso

添加品牌標識到您的產品頁的路線，然後在讀取的ID您ProductPageComponent。

例如：

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

來源

2016-08-03 18:36:36 Delosdos

這正是我想要的。我們將在很多地方使用這個功能，所以我很感謝你把它分解了。謝謝！ – Patrick

我將如何傳遞默認值，以便我仍然可以訪問產品頁面？或者我將如何配置路線？我仍然需要訪問「/ products-page」 – Patrick

只需添加兩條路線 - '{path：'product-page'，component：ProductPageComponent}， {path：'product-page /：brand'，component：ProductPageComponent} ' 並檢查品牌是否已填充或不在您的構造函數中。 – Delosdos

Angular 2使用管道路由到頁面

回答

相關問題