Tento fazer o lazyLoad mas não estou conseguindo, erro:
core.es5.js:1020 ERROR Error: Uncaught (in promise): invalid link: CadastroPage
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at NavControllerBase._fireError (nav-controller-base.js:322)
at NavControllerBase._failed (nav-controller-base.js:310)
at nav-controller-base.js:365
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.es5.js:3890)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
Meu html escolha:
<ion-header>
<ion-navbar>
<ion-title>Escolha</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides pager="true">
<ion-slide *ngFor="let foto of carro.fotos">
<img src="{{foto}}"/>
</ion-slide>
</ion-slides>
<ion-item-group>
<ion-item-divider color="light">
<ion-icon name="car"></ion-icon>
VEÍCULO
</ion-item-divider>
<ion-item>{{ carro.nome }}</ion-item>
<ion-item>R$ {{ carro.preco }}</ion-item>
</ion-item-group>
<ion-item-group>
<ion-item-divider color="light">
<ion-icon name="options"></ion-icon>
ACESSÓRIOS
</ion-item-divider>
<ion-item *ngFor="let acessorio of acessorios">
<ion-label>
<h2>{{acessorio.nome}}</h2>
<h4>R$ {{acessorio.preco}}</h4>
</ion-label>
<ion-toggle #toggle color="secondary" (ionChange)="atualizaTotal(toggle.checked, acessorio)"></ion-toggle>
</ion-item>
</ion-item-group>
<ion-item-divider color="light">
<span item-right>TOTAL: R$ {{ precoTotal }}</span>
</ion-item-divider>
<ion-fab top right edge>
<button ion-fab (click)="avancarCadastro()">
<ion-icon name="arrow-dropright"></ion-icon>
</button>
</ion-fab>
</ion-content>
Meu html cadastro:
<ion-header>
<ion-navbar>
<ion-title>cadastro</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>{{ carro.nome }}</h2>
<p>R$ {{ precoTotal }}</p>
<form>
<ion-item>
<ion-lable>Nome:</ion-lable>
<ion-input name="nome"></ion-input>
</ion-item>
</form>
</ion-content>
Meu cadastro-module.ts:
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CadastroPage } from './cadastro';
@NgModule({
declarations: [
CadastroPage,
],
imports: [
IonicPageModule.forChild(CadastroPage),
],
exports: [
CadastroPage
]
})
export class CadastroPageModule {}
Meu escolha.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Carro } from '../../modelos/carro';
import { Acessorio } from '../../modelos/acessorio';
import { CadastroPage } from '../cadastro/cadastro';
@IonicPage()
@Component({
selector: 'page-escolha',
templateUrl: 'escolha.html',
})
export class EscolhaPage {
public carro: Carro;
public acessorios: Acessorio[];
private _precoTotal: number;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.carro = this.navParams.get('carroSelecionado');
this._precoTotal = this.carro.preco;
this.acessorios = [
{nome: 'Freio ABS', preco: 800},
{nome: 'Ar-condicionado', preco: 1000},
{nome: 'MP3 Player', preco: 500}
];
}
get precoTotal(){
return this._precoTotal;
}
atualizaTotal(ativado: boolean, acessorio: Acessorio){
ativado ? this._precoTotal += acessorio.preco : this._precoTotal -= acessorio.preco;
}
avancarCadastro(){
console.log(this.carro);
console.log(this._precoTotal);
console.log(CadastroPage.name)
this.navCtrl.push(CadastroPage.name, {
carroSelecionado: this.carro,
precoTotal: this._precoTotal
});
}
}
Meu cadastro.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Carro } from '../../modelos/carro';
@IonicPage()
@Component({
selector: 'page-cadastro',
templateUrl: 'cadastro.html',
})
export class CadastroPage {
public carro: Carro;
public precoTotal: number;
constructor(public navCtrl: NavController,
public navParams: NavParams) {
this.carro = this.navParams.get('carroSelecionado');
this.precoTotal = this.navParams.get('precoTotal');
}
}