[英]How should I achieve dynamic routing in angular
Also here is the actual output这里也是实际输出
Here I am sharing my code with you guys.在这里,我与大家分享我的代码。
1. all-trades.component.ts 1. all-trades.component.ts
templateUrl: './all-trades.component.html',
styleUrls: ['./all-trades.component.css'],
})
export class AllTradesComponent implements OnInit {
// This is my Array of Object
crops = [
{
name: 'Rice',
checked: true,
subCategory: [
{
id: 1,
name: 'Basmati',
isActive: true,
},
{
id: 2,
name: 'Ammamore',
isActive: true,
},
],
},
{
name: 'Wheat',
checked: true,
subCategory: [
{
id: 1,
name: 'Durum',
isActive: true,
},
{
id: 2,
name: 'Emmer',
isActive: true,
},
],
}, {
name: 'Barley',
checked: true,
subCategory: [
{
id: 1,
name: 'Hulless Barley',
isActive: true,
},
{
id: 2,
name: 'Barley Flakes',
isActive: true,
},
],
}
]
onChange(event, index, item) {
item.checked = !item.checked;
console.log(index, event, item);
}
constructor(private route: ActivatedRoute) { }
ngOnInit(): void { }
}
2. all-trades.component.html 2. all-trades.component.html
<app-header></app-header>
<div
fxLayout="row"
fxLayout.lt-md="column"
fxLayoutAlign="space-between start"
fxLayoutAlign.lt-md="start stretch"
>
<div class="container-outer" fxFlex="20">
<div class="filters">
<section class="example-section">
<span class="example-list-section">
<h1>Select Crop</h1>
</span>
<span class="example-list-section">
<ul>
<li *ngFor="let crop of crops">
<mat-checkbox
[checked]="crop.checked"
(change)="onChange($event, i, crop)"
>
{{ crop.name }}
</mat-checkbox>
</li>
</ul>
</span>
</section>
<section class="example-section">
<span class="example-list-section">
<h1>Select District</h1>
</span>
<span class="example-list-section">
<ul>
<li *ngFor="let district of districts">
<mat-checkbox>
{{ district.name }}
</mat-checkbox>
</li>
</ul>
</span>
</section>
</div>
</div>
<div class="content container-outer" fxFlex="80">
<mat-card
class="crop-card"
style="min-width: 17%"
*ngFor="let crop of crops"
[hidden]="!crop.checked"
>
<!-- I tried the logic here to navigate to sub-Category Array by its id.
But I failed -->
<a
[routerLink]="['/all-trades', crop.id]"
routerLinkActive="router-link-active"
>
<mat-card-header>
<img
mat-card-avatar
class="example-header-image"
src="/assets/icons/crops/{{ crop.name }}.PNG"
alt="crop-image"
/>
<mat-card-title>{{ crop.name }}</mat-card-title>
<mat-card-subtitle>100 Kgs</mat-card-subtitle>
</mat-card-header>
</a>
<mat-card-content>
<p>PRICE</p>
</mat-card-content>
</mat-card>
</div>
</div>
<app-footer></app-footer>
Here You guys can see on my webpage there is couples of cards named as "RICE", "WHEAT", "BARLY" All just I want to do is by clicking on RICE my code should navigate to another component page and display the name of subCategory name from my Array of Object.在这里你们可以看到在我的网页上有几张名为“RICE”、“WHEAT”、“BARLY”的卡片 我只想通过点击 RICE 我的代码应该导航到另一个组件页面并显示名称来自我的对象数组的子类别名称。 Similarly, it should also work for "WHEAT" and "BARLEY" as well Example: When I click on Wheat Card it should navigate to different page and display the name of subCategory of Wheat section.同样,它也适用于“WHEAT”和“BARLEY” 示例:当我点击 Wheat Card 时,它应该导航到不同的页面并显示 Wheat 部分的 subCategory 的名称。
crops = [
{
name: 'Rice', <---- 1. Go here
checked: true,
subCategory: [ <-- 2. Go to subCategory and fetch the name of the "RICE" on different Page
{
id: 1,
name: 'Basmati',
isActive: true,
},
{
id: 2,
name: 'Ammamore',
isActive: true,
},
],
},
{
name: 'Wheat',
checked: true,
subCategory: [
{
id: 1,
name: 'Durum',
isActive: true,
},
{
id: 2,
name: 'Emmer',
isActive: true,
},
],
}, {
name: 'Barley',
checked: true,
subCategory: [
{
id: 1,
name: 'Hulless Barley',
isActive: true,
},
{
id: 2,
name: 'Barley Flakes',
isActive: true,
},
],
}
]
Add your Array of object into a shared folder(if not create one directory with name shared)将您的对象数组添加到共享文件夹中(如果没有创建一个名称为 shared 的目录)
create Crop.ts
into shared folder将Crop.ts
创建到共享文件夹中
import {subcategory} from './subcategory';
export class Crop{
checked:boolean
name: string;
comments: Subcategory[];
}
create subcategory.ts
into shared folder创建subcategory.ts
到共享文件夹
export class subcategory{
id:string,
name:string,
isActive:boolean
}
create cropdata.ts
into shared folder将cropdata.ts
创建到共享文件夹中
import {Crop} from './crop';
export const CROP: Crop[] = [
{
name: 'Rice',
checked: true,
subCategory:[
{
id: 1,
name: 'Basmati',
isActive: true,
},
{
id: 2,
name: 'Ammamore',
isActive: true,
},
],
},
{
name: 'Wheat',
checked: true,
subCategory: [
{
id: 1,
name: 'Durum',
isActive: true,
},
{
id: 2,
name: 'Emmer',
isActive: true,
},
],
}, {
name: 'Barley',
checked: true,
subCategory: [
{
id: 1,
name: 'Hulless Barley',
isActive: true,
},
{
id: 2,
name: 'Barley Flakes',
isActive: true,
},
],
}
]
[routerLink]="['/Cropdetail', crop.name]"
{path:'Cropdetail/:name',component:CropdetailComponent},
And in Cropdetail.ts(cropdetail component)在 Cropdetail.ts(cropdetail 组件)中
ngOnInit(): void {
let name = this.route.snapshot.params['name'];
this.crop= this.cropservice.getCrop(name);
}
genrate service cropservice
生成服务cropservice
import {CROP} from '../shared/cropdata';
CropData:CROP
getCrop(name: string): CROP{
return CropData.filter((crop) => (crop.name === name))[0];
}
and finally at to access subcategory in cropdetail.html {{Crop.subCategory}}
最后在访问cropdetail.html {{Crop.subCategory}}
子类别
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.