1

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.

1
  • voce pode usar ngrx ou um behaviorsubject Commented 19/01/2020 às 21:33

3 Respostas 3

3

No Angular temos algo chamado de @Input e @Output eles permitem trafegar dados entre componentes por exemplo.

Componente Pai

mandafiltro: any;

essa variável vai receber os dados exemplo um formulário de filtro.

Componente Filho

@Input() recebeFiltro: any;

no componente filho crio uma variavel que vai recer os dados lembrando com o @Input na frente.

Quando Chamar o Html Filho

quando chamar o html filho ou seja seu componet na tag dele você vai ter essa variavel que vai receber um parametro como pode ver na imagem abaixo

<seu-component-filho [recebeFiltro]="mandaFiltro"></seu-component-filho>

sendo assim passando os dados para o outro componente.

2
  • Por favor não utilize codigo em forma de imagem Commented 20/01/2020 às 17:14
  • obrigado pela dica. Commented 20/01/2020 às 17:20
2

Estou vendo que sua lógica é fazer tipo um carrinho de compras, a melhor forma de se trabalhar com isso de forma escalável é usar gerenciamento de estado.

A principio você esta trabalhando apenas com dois componentes, passar parâmetro por @Input() é uma boa, mas e se agora você quiser botar um ícone de um carrinho que guarde uma quantidade, e esse carrinho está em um componente que não está na arvore de componentes que contem o plano? está no componente header por exemplo, alterar esse valor por @Input() gera muito trabalho.

O correto é você guardar esses dados da compra do cliente em um lugar onde todos os componentes que precisarem alterar/pegar esses dados possa fazer isso com facilidade. Para isso você usa o gerenciamento de estado, no caso do angular com o ngrx. Da uma olhada nesse link tem uma explicação muito boa.

1

Na hora que o usuário clicar no botão de compra, você pode usar o Session Storage para salvar essas informações. Assim na outra página, você pode checar o valor dessas variáveis (plano e vigência), e fazer a tratativa.

Outra abordagem poderia ser salvar essas informações na URL de redirecionamento e na outra página puxar com URLSearchParams.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .