【问题标题】:Ionic 2 Simple Singleton Service [Partial Error]Ionic 2 简单单例服务 [部分错误]
【发布时间】:2017-08-08 21:25:22
【问题描述】:

我创建了类User 以在多个组件中用作服务(单例)。 你能检查一下我写的Injectable()是否正确。

import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http';
import { NavController, NavParams } from 'ionic-angular';
import { Facebook } from 'ionic-native';
import { HomePage } from '../../pages/home/home';

@Injectable()
export class User {
  public email;
  public pass;
  private token;
  private picture
  private fbToken              

  constructor(public http : Http){}

  public getEmail(){
    return this.email;
  }

  // more getters and setters.

在第一个组件(LoginPage)中它工作正常!

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { RegisterPage } from '../register/register';
import { User } from '../../classes/singleton/user';

enum TpLogin {
    defLogin,
    fbLogin
}

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})

export class LoginPage {          
    public tpLogin = TpLogin;    

    constructor(public navCtrl: NavController, public navParams: NavParams, public user : User){}            

    ionViewDidLoad() {}

    goHome(tpLogin : TpLogin){                
        var obj = this;                
        switch (tpLogin) {
            case TpLogin.defLogin : {obj.user.login(this.navCtrl); break;}          
            case TpLogin.fbLogin  : {obj.user.fbLogin(this.navCtrl); break;}
        }              
    }        
}

但是当我在其他组件中导入User 并运行应用程序时,我得到了这个错误:

运行时错误 无法解析主页的所有参数:([object Object], [object Object], ?)。

PS.. 我在appModule.ts 中导入了服务User 作为提供者,见:

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 { HttpModule } from '@angular/http';
import { MyApp } from './app.component';
import { LoginPage } from '../pages/Login/login';
import { RegisterPage } from '../pages/register/register';
import { HomePage } from '../pages/home/home';
import { InfoPage } from '../pages/info/info';
import { User } from '../classes/singleton/user';

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

有人可以帮忙吗?

【问题讨论】:

  • 分享你的首页类代码
  • 你可能有循环依赖,给我们看看 homepage.ts 和 homepage.module.ts,如果有的话
  • 感谢@Faisal 的回复,我不使用homepage.module.ts,我在appModule.ts 中声明了所有提供者,这是我的home.ts:

标签: javascript angular typescript ionic2


【解决方案1】:

这是我的 HOME.TS

import { User } from '../../classes/singleton/user';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { InfoPage } from '../info/info';
import {Http, Headers} from '@angular/http';


declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    public listaBarber = [];    
    @ViewChild('map') mapElement: ElementRef;
     map: any;

  constructor(public navCtrl: NavController, public http: Http, public user : User) {      
        var url = 'https://cors-anywhere.herokuapp.com/http://98.111.45.209/barbearias';
        var headers = new Headers();          
        
        headers.append('Content-Type', 'application/json');           
        //headers.append('x-access-token', this.user.getToken());
        
        http.get(url,{headers: headers}).subscribe(res => {console.log(res.json().data);
                                                           this.listaBarber = res.json().data},
                                                   (err) => {console.log(err._body);});
  };

  ionViewDidLoad(){
    this.loadMap();
  };

  loadMap(){
 
    let latLng = new google.maps.LatLng(-26.334302,-48.8524027);
 
    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
 
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
 
  }    

    getInfo(id,entidade){    
        this.navCtrl.push(InfoPage,{allValues:{id:id,entidade:entidade}});        
    };
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多