Question

您好我正在以角度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

你应该使用angular routerlink。 href不会以角度工作

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

Answer 2

要在angularjs中进行路由，您需要在主标记中使用routerLink属性，在主页中使用router-outlet标记来显示路由器链接的响应。

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

在appcomponent.html中使用以下代码显示Shop component.html的内容。

<router-outlet>

产品类别的角度路由

2 个答案: