当我的angular 2(ionic 2)应用程序主页加载时,我想要呼叫服务/功能.怎么做到这一点？

对于当应用程序被加载(主页加载),我可以在写这篇文章的第一次constructor,但是当用户开始使用应用程序和push新的页面到nav controller和pop他们回来home page时,constructor不会再次调用.

我被困在这里.

我想知道实现此功能的最佳方法是什么？

我是新来的angular2和(也没有在经验和),请帮助我.ionic2 frameworkangular1ionic1

非常感谢.

更新

我尝试过的示例代码,但没有奏效.

import {Page, NavController, Platform, Storage, SqlStorage} from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
    static get parameters(){
        return [[NavController],[Platform]];
    }
    ngOnInit() {
        console.log("Showing the first page!");
    }
    constructor(nav, platform){
        this.nav = nav;
        this.platform =  platform;
    }
}

我正在尝试启动一个基本的ionic2应用程序,并想知道我的初始应用程序加载的时间是否是一个问题.我想做的是如果用户未经过身份验证,则将起始页面设置为登录页面.

我最初将根页面设置为主页,然后当异步调用从localstorage返回时,如果用户未经身份验证,我会将根页面重置为登录页面.但是,这会导致闪烁,他们看到一个页面然后被发送到另一个页面.

看起来我想要做的就是在显示任何屏幕之前等待本地存储调用.

我的问题是:由于代码现在已经存在,是否会出现错误情况,平台准备好在根页面设置之前触发,从而导致某种问题？我应该如何处理Ionic 2和Angular 2中的这种情况？我应该将get localStorage调用同步,还是应该将其填充到Angular 2中属于应用程序或页面生命周期的另一个事件或方法中？

我应该使用某种可观察或等待语法吗？

export class MyApp {
  rootPage: any;
  local: Storage = new Storage(LocalStorage);

  constructor(platform: Platform) {

    this.local.get('user').then(user => {
      if (user) {
        this.rootPage = TabsPage;
      } else {
        this.rootPage = LoginPage;
      }
    });

    platform.ready().then(() => {
      // Will this ever fire before the rootpage is set?
      StatusBar.styleDefault();

    });
  }
}

我正在与远程团队合作开发Ionic 1应用程序,最近我们的版本彼此不喜欢.我想知道我是否也一直致力于Ionic 2项目的事实我的CLI"认为"这些应用程序也是Ionic 2并且那里正在拍摄下面的错误？

离子构建ios

WARN: ionic.project has been renamed to ionic.config.json, please rename it.
(node:9061) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
Uh oh! Looks like you're missing a module in your gulpfile:
Cannot find module 'bower'

Do you need to run `npm install`?

我已经运行了npm install ..并没有让它消失..我也确保安装了凉亭.

这与这里有什么关系呢？我已经被困在这里几天了.

UPDATE

我去了一个旧的项目,我试图运行ionic info,看看我的版本和系统信息,但我得到了相同的错误信息..

我不明白为了得到这个我做了什么......

mymac ~/code/92_AAC/newApp on master[!]
$ ionic info
WARN: ionic.project …

我已经按照Ionic2模态给出的示例而没有得到任何错误但是当我点击应该启动模态的卡时没有任何反应.

这是模态本身的代码:

@Component ({
    template: `
        <ion-card class='popover'>
            <ion-card-content>
                Hello
            </ion-card-content>
        </ion-card>
    `
})

export class AccModal {

    dumbData: number;
    constructor() {
         console.log("constructor");
         this.dumbData= 22;
    }
}

我的模态将呈现的页面如下所示:

<ion-card (click)='presentModal()' class='custom-card'>
    <ion-card-header>
        Sched. Accuracy
    </ion-card-header>
    <ion-card-content>
        71%
    </ion-card-content>
</ion-card>

使用这样的打字稿:

presentModal() {
    let myModal = Modal.create(AccModal, {param: "something"});
    console.log('myModal is ', myModal);
    this.nav.present(myModal);
    console.log("function being called");
}

将console.log在presentModal正在注册,但人在情态的构造函数是没有的.我不知道该怎么办,因为我不是百分之百确定会发生什么事吗？

UPDATE

当我调试nav.present(导航控制器功能)时,我看到的是:

if (rootNav['_tabs']) {
    // TODO: must have until this goes in
    // https://github.com/angular/angular/issues/5481
    void …

我找不到这种解决方案的任何例子.它可行吗？据我所知,它应该是,但我没有看到有人这样做.这种方式有什么缺点吗？

谢谢 !

我使用Ionic 2 sidemenu创建了一个项目

$ ionic start mySideMenu sidemenu --v2

我只写了几个代码,只是为了测试它是否适用于iOS设备/模拟器.

page1.ts

import { Component, trigger, state, style, transition, animate } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-page1',
    templateUrl: 'page1.html',
    animations: [
        trigger('buttonState', [
            state('left', style({ transform: 'translateX(100px)', backgroundColor: 'red' })),
            state('right', style({ transform: 'translateX(0)', backgroundColor: 'blue' })),
            transition('left <=> right', [
                animate('1000ms ease-in-out')
            ])
        ])
    ]
})
export class Page1 {

    state: string = 'left';

    constructor(public navCtrl: NavController) {

    }

    changeState() {
        this.state = this.state == …

我使用Angular2来限制文本框中的复制和粘贴.但是我如何编写自定义指令,以便它可以很容易地应用于所有文本字段.

以下是限制复制和粘贴功能的工作代码.

<ion-input formControlName="confirmpass" type="tel" (cut)="$event.preventDefault()" (copy)="$event.preventDefault()" (paste)="$event.preventDefault()"></ion-input>

所以我使用无限滚动来加载一个非常大的反应形式.但是我注意到,如果在无限滚动加载其他项目时触发了表单输入事件,则会发生这种情况.

    ERROR TypeError: Cannot read property 'timeStamp' of null
    at InfiniteScroll._onScroll (infinite-scroll.js:229)
    at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3647)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.next (Subscriber.js:185)
    at Subscriber._next (Subscriber.js:125)
    at Subscriber.next (Subscriber.js:89)
    at EventEmitterProxy.Subject.next (Subject.js:55)
    at EventEmitterProxy.EventEmitter.emit (core.es5.js:3621)
    at ScrollView.scroll.onScroll (content.js:378)
    at ScrollView.setScrolling (scroll-view.js:52)
    at ScrollView.scrollTo (scroll-view.js:401)
    at Content.scrollTo (content.js:433)
    at TextInput._jsSetFocus (input.js:524)
    at TextInput._pointerEnd (input.js:496)
    at Object.eval [as handleEvent] (TextInput.ngfactory.js:130)
    at Object.handleEvent (core.es5.js:11998)
    at Object.handleEvent (core.es5.js:12717)
    at dispatchEvent (core.es5.js:8614)
    at core.es5.js:9228
    at HTMLDivElement.<anonymous> (platform-browser.es5.js:2648)
    at HTMLDivElement.wrapped (raven.js:350)
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask …

我在尝试查看Ionic2应用程序时遇到此错误.我试图在我的应用程序中实现天气应用程序.我不确定这是否导致错误.

我不确定错误来自哪里,所以我不确定要发布哪个代码,所以,如果您需要查看某些代码,请告诉我.

找不到模块"@ angular/core/src/metadata/directives"

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import firebase from 'firebase';
import { firebaseConfig } from './credentials';
import { HomePage } from '../pages/home/home';
import { Unsubscribe } from '@firebase/util';
import {MenuPage} from '../pages/menu/menu';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any;

  constructor(
    platform: Platform,
    statusBar: StatusBar,
    splashScreen: SplashScreen
  ) {
    firebase.initializeApp(firebaseConfig);

    const unsubscribe: Unsubscribe = firebase.auth().onAuthStateChanged(user => …

我对离子框架很新.我想在滑块表单中添加多个标记以及信息卡,就像附加的图像一样.我能够在地图中添加多个标记,但不知道如何添加将激活标记的信息滑块.对应于滑块.可以请任何关于如何使用它的提示.

我的eventmap.ts文件显示多个标记

export class EventMapPage {
    public userToken:any;
    public userPostData = {"api_token":""};
    public responseData:any;
    public dataSet:any;



    @ViewChild('map') mapRef:ElementRef;

  constructor(...) {
      this.getEvents().then(result=> {
          this.responseData = result;
          this.DisplayMap(this.responseData);
      });

  }

     //Get all the available events
    getEvents(){
        const data = localStorage.getItem('userToken');
        this.userPostData.api_token= data;
        return this.authService.postData(this.userPostData,'events');
    }

    //Initializing the map


  DisplayMap(data) {
this.geolocation.getCurrentPosition().then((resp) => {
   const location = new google.maps.LatLng(resp.coords.latitude,
     resp.coords.longitude);
   const options = {
     center:location,
     zoom:10,
     mapTypeControl: false,
     streetViewControl:false,
   };
     const map = new google.maps.Map(this.mapRef.nativeElement,options);
     //Loop the markers
       if(data != null){
         for(var i=0; …