产品类别的角度路由

Question

您好，我正在创建一个 Angular 4 的商店页面，我遇到了一个角度路由问题，当用户单击产品类别时，网站应该将他/她重定向到商店页面。

在我的主页上。我在产品类别中给出了两个链接 -

<h2>Product Categories</h2>
<a [routerLink]="['/shop', id]>Jeans</a>
<a [routerLink]="['/shop', id]>Shirts</a>

对于商店页面组件，我创建了从 JSON 文件中获取数据的服务

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

因此，当用户点击牛仔裤时，它应该只显示牛仔裤产品，而当用户点击衬衫时，它应该只显示衬衫产品。

这是我的应用路由模块 -

app-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { routes } from './routes';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [ RouterModule ],
  declarations: []
})
export class AppRoutingModule { }

routes.ts 文件 -

export const routes:Routes = [
    {path: 'home', component: HomeComponent},
    {path: 'shop/:id', component: ShopComponent},
    {path: '', redirectTo: '/home', pathMatch: 'full'}
];

因此，当用户点击牛仔裤时，它应该只显示牛仔裤产品，而当用户点击衬衫时，它应该只显示衬衫产品。我们可以过滤相同组件的数据吗？

Answer 1

您应该使用角度路由器链接。 href 不能在 Angular 中工作

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

Answer 2

在angularjs中做路由，需要在anchor标签和首页的router-outlet标签中使用routerLink属性来显示router Link的响应。

<h2>Product Categories</h2>
<a routerLink="shop/:id">Jeans</a>
<a routerLink="shop/:id">Shirts</a>

在 appcomponent.html 中使用下面的标签来显示 Shop component.html 的内容。

<router-outlet>