Angular2一个组件和多个路由

时间:2017-09-04 15:56:25

标签: angular angular2-routing

在我的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;         
        }
    }
}

0 个答案:

没有答案