Tenho um código onde é exibido uma lista de planos que uma academia tem, ao clicar em algum, abre uma página onde ele escolhe se será (Tempo: trimestral, semestral ou anual), e selecionará a modalidade (caso aja), como:
- Plano: Artes Marciais
- Modalidades: Jiu-jitsu, Defesa pessoal, Muay thai e etc...
Para escolher tempo optei por um Radio button e para modalidade um checkbox.
Quando a pessoa clica em comprar, vai para a tela de compra onde o usuário vai digitar os dados sobre ele, cartão e etc...
A minha dúvida é qual a melhor forma de eu passar os dados de o que o usuário escolheu como tempo e modalidade para a página de compras, como trafegar esses dados?
Código da página:
pagina.plano.ts
public planoId;
private planoDados;
vigencia: number;
modalidades: any[] = [];
limiteModalidades: number;
modalidadesEscolhidas: any[] = [];
modalidadesObrigatorias: any[] = [];
numeroModalidadesObrigatorias: number;
constructor(
private planoService: PlanoService,
private router: Router,
private activatedRoute: ActivatedRoute
) {
this.activatedRoute.params.subscribe(params => (this.planoId = params.id));
}
ngOnInit() {
this.planoService.receberPlano(this.planoId).subscribe(response => {
this.limiteModalidades = parseInt(response.Itens[0].PlanoModalidadeSelecaoLimite, 10);
this.planoDados = response.Itens[0];
response.Itens[0].PlanoModalidades.forEach(i => {
this.modalidades.push(i)
})
this.modalidadesObrigatorias = response.Itens[0].PlanoModalidades.filter((obg) => {
return obg.PlanoModalidadeObrigatoria === '1'
})
console.log(this.modalidadesObrigatorias)
this.numeroModalidadesObrigatorias = this.modalidadesObrigatorias.length
this.modalidadesObrigatorias.forEach(i => {
this.modalidadesEscolhidas.push(i.PlanoModalidadeID)
});
this.numeroPlanosAEscolher = this.limiteModalidades - this.modalidadesEscolhidas.length
});
}
valorVigencia(vigencia) {
this.vigencia = vigencia
}
addModalidade(i) {
let index = this.modalidadesEscolhidas.indexOf(i)
if (this.modalidadesEscolhidas.length >= this.limiteModalidades) {
this.checkboxErro = true;
} else {
this.checkboxErro = false;
}
if (index === -1) {
this.modalidadesEscolhidas.push(i)
} else {
this.modalidadesEscolhidas.splice(index, 1)
}
}
validar(){
if (this.vigencia && this.modalidadesEscolhidas.length === this.limiteModalidades) {
this.router.navigateByUrl(`./comprar/${this.planoId}/${this.vigencia}/${this.modalidadesEscolhidas}`)
} else {
console.log('Merda')
}
}
}
pagina.plano.html
<div>
<label class="btn btn-outline-success col teste">
<input #radioBox
type="radio"
name="options"
(click)="valorVigencia(radioBox.value)"
[value]="v.ItemValorID"
/>
<span class="lead">
{{ v?.ItemValorQuantidade | frequenciaParaRecorrencia }}
<div>
{{ v?.ItemValorQuantidade }}x de
{{ v?.ItemValorPreco / v?.ItemValorQuantidade | currency: "BRL" }}
</div>
</span>
</label>
<div *ngFor="let modalidade of modalidades; let i = index">
<label class="btn btn-outline-success col teste">
<input #checkbox
type="checkbox"
[name]="modalidades"
[value]="modalidade.PlanoModalidadeID"
(change)="addCheckbox(checkbox.value)"
[checked]="modalidade.PlanoModalidadeObrigatoria === '1'"
[disabled]="modalidade.PlanoModalidadeObrigatoria === '1'"
/>
<span class="lead">
{{ modalidade?.PlanoModalidadeDescricao }}
</span>
</label>
</div>
Só preciso passar para a página de compra o id do plano planoId: number
, tempo: vigencia: number
e modalidades: modalidadesEscolhidas: string[]
Me ajudem!! Se acharem que preciso melhorar a pergunta me avisem.