在我的Web应用程序中,我有一个组件,可以显示text-data
的数组。数组是根据按钮动态变化的(它决定了存储在变量中的数据发送到数组,我们从三个选项中选择)被选中。
我想进行路由,这将根据发送的数据更改为数组。有人可以告诉如何路由到这种类型的情况吗?
更新
图库组件从我的服务中获取3个数组,其中包含女性/男性/高级模型数据。我们决定在导航中显示哪种型号的类型。根据选择,我希望有'/ models',/ model,'/ premium。
Gallery.component.html
<div class="demonstration__navigation">
<nav class="navigation">
<button
class="button"
(click)="onChangeModelsTeamClick('female')"
>
MODELKI
</button><!--
--><button
class="button"
(click)="onChangeModelsTeamClick('male')"
>
MODELE
</button><!--
--><button
class="button"
(click)="onChangeModelsTeamClick('premium')"
>
PREMIUM
</button>
</nav>
</div>
<div class="demonstration__slider">
<app-teamDemonstration
[models]="getChosenModels()"
(chosenModel)="chosenModel=$event"
>
</app-teamDemonstration>
</div>
Gallery.component.ts
@Component({
selector: 'app-gallery',
templateUrl: './gallery.component.html',
styleUrls: ['./gallery.component.scss'],
})
export class GalleryComponent implements OnInit {
femaleModels: Model[];
maleModels: Model[];
premiumModels: Model[];
chosenModels: string;
constructor(private _modelsService: ModelsService) {}
ngOnInit() {
this._modelsService
.getFemaleModels()
.subscribe( responseFemaleModelsData => this.femaleModels = responseFemaleModelsData );
this._modelsService
.getMaleModels()
.subscribe( responseMaleModelsData => this.maleModels = responseMaleModelsData );
this._modelsService
.getPremiumModels()
.subscribe( responsePremiumModelsData => this.premiumModels = responsePremiumModelsData );
this.chosenModels = this._modelsService.getchosenModels();
this._modelsService._chosenModelsUpdate.subscribe(
(chosenModels) => {
this.chosenModels = this._modelsService.getchosenModels();
}
);
}
onChangeModelsTeamClick(value: string) {
this._modelsService.setchosenModels(value);
}
getChosenModels() {
switch(this.chosenModels) {
case 'female': return this.femaleModels;
case 'male': return this.maleModels;
case 'premium': return this.premiumModels;
default : return this.femaleModels;
}
}
}