我正在创建一个电子商务角度网络应用程序，我需要一些帮助。
我有什么
我创建了一个父类别组件，它列出了我的数据库中一个表中的所有类别（我使用 Django 作为我的后端）。在这个组件中，我有一个子组件，负责创建每个类别卡片的格式。
父组件
$folder1path = "<path of folder 1>"
$folder2path = "<path of folder 2>"
invoke-command -computername $server -ArgumentList @($folder1path,$folder2path) -scriptblock {param($folder1path,$folder2path)
$servername = hostname
$infoObject = New-Object PSObject
$folder1count=(Get-ChildItem -recurse -path $folder1path).count
$folder2count =(Get-ChildItem -recurse -path $folder2path).count
if ($folder1count -ne 0 -or $folder2count -ne 0) {
Add-Member -inputObject $infoObject -memberType NoteProperty -name "ServerName" -value $Servername
Add-Member -inputObject $infoObject -memberType NoteProperty -name "Folder1" -value $folder1count
Add-Member -inputObject $infoObject -memberType NoteProperty -name "Folder2" -value $folder2count
$infoObject
}} | Select-Object * -ExcludeProperty PSComputerName, RunspaceId, PSShowComputerName | Export-Csv -path "C:\temp\Test_count_folder.csv" -NoTypeInformation
department.component.tsimport { Component, Input, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CookieService } from 'ngx-cookie-service';
import { ApiService } from 'src/app/api.service';
import { Category } from '../../models/Category';
@Component({
selector: 'app-department',
templateUrl: './department.component.html',
styleUrls: ['./department.component.css']
})
export class DepartmentComponent implements OnInit {
categories: Category[] = [];
constructor(
private cookieService: CookieService,
private apiService: ApiService,
private router: Router) { }
ngOnInit(): void {
const urToken = this.cookieService.get('ur-token')
if (!urToken) {
this.router.navigate(['/auth']);
} else {
this.apiService.getCategories().subscribe(
data => {
this.categories = data;
},
error => console.log(error)
);
}
}
}
department.component.html子组件
<section class="pt-5 pb-5">
<div class="container cards cards-hover">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 m-0 p-0" *ngFor="let category of categories" routerLink="categoryList">
<app-department-item [categoryItem]="category"></app-department-item>
</div>
</div>
</div>
</section>
department-item.component.tsimport { EventEmitter, Input, Output } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { Category } from '../../../models/Category';
@Component({
selector: 'app-department-item',
templateUrl: './department-item.component.html',
styleUrls: ['./department-item.component.css']
})
export class DepartmentItemComponent implements OnInit {
@Input() categoryItem!: Category
@Output() selectCategory = new EventEmitter();
constructor() { }
ngOnInit(): void {
}
categoryClicked(categoryItem: Category) {
this.selectCategory.emit(categoryItem);
}
}
department-item.component.html我想做什么
我希望能够点击类别卡片（例如：服装和配饰）并被重定向到一个新页面，其中列出了该类别内的所有产品。
当我想从类别页面导航到新页面并仅使用该类别中的产品填充该页面时，我该怎么做