0

Tenho um componente chamado footer, nele contém o seguinte código:

footer.html

<ion-footer>
  <ion-toolbar color="black-light">
    <button ion-button color="light" full clear>{{btnFooter}}</button>
  </ion-toolbar>
</ion-footer>

footer.ts

import { Component, Input } from '@angular/core';

import { CadastroContaPage } from '../pages/cadastro-conta/cadastro-conta';

@Component({
  selector: 'footer',
  templateUrl: 'footer.html'
})
export class FooterComponent {

  //INSERIR OS ELEMENTOS NOS BOTÕES
  @Input() btnFooter: string;

  constructor() {}

}

Este componente irá estar em diversas páginas, então eu não posso colocar um link fixo para ele, pois em cada página haverá um link diferente. Eu tenho uma page chamada cadastro-conta que é CadastroContaPage, eu gostaria que o componente footer na página login-conta muda-se para a página cadastro-conta assim que clica-se no componente.

2 Respostas 2

1
<ion-footer>
  <ion-toolbar color="black-light">
    <button ion-button color="light" full clear (click)="abrirTela">Abrir Nova Tela</button>
  </ion-toolbar>
</ion-footer>
import { Component, Input } from '@angular/core';
import { CadastroContaPage } from '../pages/cadastro-conta/cadastro-conta';
//-- Importe para a navegação entre paginas --
import { NavController} from 'ionic-angular';
//------------------------------------

@Component({
  selector: 'footer',
  templateUrl: 'footer.html'
})
export class FooterComponent {

  //INSERIR OS ELEMENTOS NOS BOTÕES
  @Input() btnFooter: string;

  // Adiconar no construtor a instancia do navControler
  constructor(public navCtrl: NavController) {}
  /*
  * Metodo utilizado para abrir a tela desejada
  */
  abrirTela(){
    //Vai abrir a tela desejada, onde a mesma deve ser importada, assim, vou achamar a cadastroContaPage
    this.navCtrl.push(CadastroContaPage);
  }

}
0

No aquivo de por exemplo Home.html, digite:

<ion-content padding>
    <button ion-button block color="danger" (click)= 
    "openPage2()">Tela2</button>
</ion-content>

E no arquivo Home.ts, digite dentro da classe principal:

openPage2() 
{
    this.navCtrl.push(TeladoisPage);
}

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