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

Erro gerado na aula no navCtrl.push

professor você disse que a partir do ionic 3 é necessário colocar o argumento (nome da classe) do navCtrl.push como string senão ele não funciona... no meu caso da problema se fizer ele como string 'EscolhaPage' gera o erro e se deixar como EscolhaPage ele funciona normalmente...

selecionaCarro(carro: Carro){
    console.log(carro);
    this.navCtrl.push(EscolhaPage, {
      carroSelecionado: carro
    }); // aqui faz como se estivesse empilhando em cima da outra página.
  }
5 respostas

Consegue colocar todo código aqui para gente analisar o erro?

import { Component } from '@angular/core';
import { NavController, LoadingController, AlertController } from 'ionic-angular';
import { Carro } from '../../modelos/carro';
import { HttpErrorResponse } from '@angular/common/http'
import { CarrosServiceProvider } from '../../providers/carros-service/carros-service';
import { NavLifeCycles } from '../../utils/ionic/nav/nav-lifecycle';
import { EscolhaPage } from '../escolha/escolha';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements NavLifeCycles{

  public carros: Carro[];

  constructor(
    public navCtrl: NavController, // esse é o que controla a navegação da página.
    private loadingCtrl: LoadingController, // faz com que apareça a barra de carregamento.
    private alertCtrl: AlertController, // serve para indicar qual o erro encontrado ao tentar acessar o endereço da API e estar incorreta.
    private carroServico: CarrosServiceProvider
  ) {}

  ionViewDidLoad() {

    let loading = this.loadingCtrl.create({
      content: 'Aguarde o carregamento dos carros...'
    })

    loading.present(); // apareça a barra de carregamento.

    this.carroServico.lista() // chamando meu método do serviço para dar o subscribe.
      .subscribe( (carrosAPI) => 
      { // inscrevendo para pegar o retorno dos dados obtidos da API.
        this.carros = carrosAPI;
        loading.dismiss(); // remova o carregamento.
      },
      (err: HttpErrorResponse) => { // tratando o erro encontrado.
        console.log(err); // msg do console.log.
        loading.dismiss(); // desaparece o carregamento do loading.
        this.alertCtrl.create({ // cria um popup exibindo qual foi o erro que gerou para o usuário entender que houve um erro.
          title: 'Falha na conexão', // mensage do titulo do erro.
          subTitle: 'Não foi possível carregar a lista de carros. Tente novamente mais tarde!', // mensage do corpo do erro.
          buttons: [ // criando um botão.
            { text: 'Ok'} // mensagem do botão.
          ]
        }).present()// se não tiver o present o erro não será apresentado.
      })
  }

  selecionaCarro(carro: Carro){
    console.log(carro);
    this.navCtrl.push(EscolhaPage.name, { // EscolhaPage.name ele pega o nome da classe do componente caso seja alterado não tera problema.
      carroSelecionado: carro
    }); // aqui faz como se estivesse empilhando em cima da outra página.
  }

}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Carro } from '../../modelos/carro';


@IonicPage()
@Component({
  selector: 'page-escolha',
  templateUrl: 'escolha.html',
})
export class EscolhaPage {

  public carro: Carro;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams) {
      this.carro = this.navParams.get('carroSelecionado'); // busca no navParams a propriedade carroSelecionado criado no home.
    }

  ionViewDidLoad() {
    console.log('ionViewDidLoad EscolhaPage');
  }

} 
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { EscolhaPage } from './escolha';

@NgModule({
  declarations: [
    EscolhaPage,
  ],
  imports: [
    IonicPageModule.forChild(EscolhaPage),
  ],
  exports: [
    EscolhaPage
  ]
})
export class EscolhaPageModule {}
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { HttpClientModule } from '@angular/common/http';
import { CarrosServiceProvider } from '../providers/carros-service/carros-service';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    CarrosServiceProvider
  ]
})
export class AppModule {}

A página do Ionic tá meio que fora do ar. Talvez seja minha internet.

na verdade agora eu consegui, eu peguei o nome e da classe e renomiei, e depois voltei com o mesmo nome e funcionou... não sei porque mas funcionou.

solução!

Isso aconteceu porque você meio que forçou um rebuild no projeto. Isso acontece as vezes com qualquer linguagem de programação.

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