如何实现产品类别的角度路由？

Question

我正在用 firebase 创建一个有角度的网上商店。我不想为每个类别创建不同的组件。示例路线：/products/tables 它应该列出所有表格。第二个例子：/products/chairs 它应该列出所有的椅子。当用户点击一把椅子时，路由应该是：/products/chairs/1234，其中 1234 是产品 ID。如果不将每个类别都定义为路线，这是否可能？

Answer 1

你想要一条 /genericProdct/1234 路线...... 也许您需要一个组件和服务来检索类别... 然后你只打印列表，然后打印 productID

或者，如果您想要每个类别的路线 dinamica，也许您需要来自后端的 json ... o 由您创建以呈现所有类别...

Answer 2

app.routing.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CategoryComponent } from './products/category/category.component';
import { ProductComponent } from './products/category/product/product.component';
import { ProductsComponent } from './products/products.component';
const routes: Routes = [
    { path: '', pathMatch: 'full', component: ProductsComponent },
    { path: 'products/:category', component: CategoryComponent },
    { path: 'products/:category/:id', component: ProductComponent },
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}

app.component.html:

<router-outlet></router-outlet>

products.components.ts:

import { Component, OnInit } from '@angular/core';
import { ProductsService } from '../products.service';
@Component({
    selector: 'app-products',
    template: `
        <h1>Products:</h1>
        <ul>
            <li *ngFor="let category of categories">
                <a routerLink="{{ 'products/' + category }}">
                    <h1>
                        {{ category }}
                    </h1>
                </a>
            </li>
        </ul>
    `,
    styleUrls: ['./products.component.css'],
})
export class ProductsComponent implements OnInit {
    categories: string[] = [];
    constructor(private productsService: ProductsService) {}
    ngOnInit(): void {
        this.categories = this.productsService.getCategoryNames();
    }
}

类别.component.ts：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { ProductsService } from 'src/app/products.service';
@Component({
    selector: 'app-category',
    template: `
        <h1>Products in {{ category }} category:</h1>
        <ul>
            <li *ngFor="let product of products; index as i">
                <a routerLink="{{ i }}">
                    <h2>
                        {{ product }}
                    </h2>
                </a>
            </li>
        </ul>
    `,
    styleUrls: ['./category.component.css'],
})
export class CategoryComponent implements OnInit {
    products: string[] = [];
    category = '';
    constructor(
        private route: ActivatedRoute,
        private productsService: ProductsService
    ) {}
    ngOnInit(): void {
        this.route.params.subscribe((params: Params) => {
            this.category = params['category'];
            this.products = this.productsService.getCategoryItems(
                this.category
            );
        });
    }
}

product.component.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { ProductsService } from 'src/app/products.service';
@Component({
    selector: 'app-product',
    template: `
        <h3>
            {{ product }}
        </h3>
    `,
    styleUrls: ['./product.component.css'],
})
export class ProductComponent implements OnInit {
    product = '';
    constructor(
        private route: ActivatedRoute,
        private productsService: ProductsService
    ) {}
    ngOnInit(): void {
        this.route.params.subscribe((params: Params) => {
            const category: string = params['category'];
            const id: number = params['id'];
            this.product = this.productsService.getProduct(category, id);
        });
    }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProductsService } from './products.service';
import { CategoryComponent } from './products/category/category.component';
import { ProductComponent } from './products/category/product/product.component';
import { ProductsComponent } from './products/products.component';
@NgModule({
    declarations: [
        AppComponent,
        ProductsComponent,
        CategoryComponent,
        ProductComponent,
    ],
    imports: [BrowserModule, AppRoutingModule],
    providers: [ProductsService],
    bootstrap: [AppComponent],
})
export class AppModule {}

产品.服务.ts：

export class ProductsService {
    products: any = {
        tables: ['table1', 'table2', 'table3'],
        chairs: ['chair1', 'chair2', 'chair3', 'chair4'],
    };
    getProduct(category: string, id: number) {
        return this.products[category][id];
    }
    getCategoryItems(category: string) {
        return this.products[category];
    }
    getCategoryNames() {
        return Object.keys(this.products);
    }
}