Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Menu lateral dinâmico

Boa tarde,

Queria fazer um menu lateral dinâmico, utilizando o app.component.ts. Porém, o component não possui a opção de IonViewDidLoad. Tentei utilizando o método get, mas nesse caso, todo clique que dou na aplicação, esse método get é executado, inclusive a chamada a API. Tem alguma forma de fazer isso?

Att, Camila Pitondo

6 respostas

Boa noite, Camila! Como vai, minha aluna?

Eu não entendi mto bem a situação. Esse menu será dinâmico, mas com base em quais informações? Os itens do menu serão diferentes dependendo do tipo do usuário? Seria isso?

Boa noite professor,

Me desculpe, não fui muito clara na minha pergunta. Os dados que quero colocar no menu lateral vão vir de uma API. Essa API já está funcionando, mas não sei como chamar esses dados para exibir no app.component. Porque nas pages, coloco no IonViewDidLoad (a chamada com subscribe). O que eu quero fazer é parecido com o menu do aplicativo do gmail. Não sei se é possível criar o menu lateral numa page ou se sou obrigada a usar o app.component. O menu vai exibir ou não algumas informações dependendo do usuário. Mas a minha questão é como buscar esses dados e exibi-los no menu. Não sei se fui clara dessa vez, mas se tiver alguma dúvida, eu explico novamente.

Aqui a ideia do menu: https://market.ionicframework.com/themes/iongmail

Obrigada, Camila Pitondo.

solução!

Bom dia,

Consegui resolver utilizando o Events do Angular.

Crio o usuário no login.ts

import { Events } from 'ionic-angular';

constructor(public events: Events) {}
createUser(user) {
  console.log('User created!')
  this.events.publish('user:created', user, Date.now());
}

E no app.component.ts, utilizo o usuário que foi criado. Assim, ele só aciona esses métodos quando o usuário já estiver criado.

import { Events } from 'ionic-angular';

constructor(public events: Events) {
  events.subscribe('user:created', (user, time) => {
    console.log('Welcome', user, 'at', time);
  });
}

Encontrei essa solução no stackoverflow, para aqueles que se interessarem, segue o link abaixo.

https://stackoverflow.com/questions/45211533/ionic-3-refresh-side-menu-after-login

Muito obrigada.

Boa tarde, Camila! Como vai?

Que bom que conseguiu resolver o problema! E de uma forma muito elegante!

Só me permita fazer uma observação! Veja que o nome do canal de comunicação é uma string 'user:created'. Isso implica que se vc por algum engano errar essa string em algum momento da sua aplicação, a comunicação não se dará do jeito que vc quer!

Então, minha sugestão é que vc isole a inscrição no seu serviço de usuário, dessa forma:

class UsuariosServiceProvider {
     private static TOPICO_USUARIO_CRIADO: string = 'user:created';

     constructor(public events: Events) {}

     notificaUsuarioCriado(callback) {
          this.events.subscribe(UsuariosServiceProvider.TOPICO_USUARIO_CRIADO, callback);
     }
}

Assim, fica tudo encapsulado dentro do seu serviço e mais fácil de gerenciar e dar manutenção no código!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, minha aluna!

Boa tarde Professor,

Muito obrigada pela dica. Vou implementar essa alteração.

Por nada, Camila! Sempre que tiver qualquer dúvida é só mandar aqui no fórum!

Grande abraço e bons estudos, minha aluna!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software