当我的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 …

情况:

我想在我的Ionic 2应用程序中创建一个非常简单的登录表单.

无论我尝试什么,我都会收到这个错误:

formGroup expects a FormGroup instance. Please pass one in.

代码:

页面组件:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormGroup, Validators, FormBuilder }  from '@angular/forms';

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

export class LoginPage {

    loginForm: FormGroup;

    constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {}

    ionViewDidLoad() 
    {
        console.log('Login page loaded');

        this.loginForm = this.formBuilder.group({
            email: ['', Validators.required],
            password: ['', Validators.required],
        });
    }

    submitLogin() 
    {
        console.log('Doing login..');
    }

}

风景:

<ion-header>
  <ion-navbar>
    <ion-title>LoginPage</ion-title> …

我想自定义此屏幕截图中提到的后退按钮的单击操作.我希望通过点击我不会返回到上一页,而是返回到我自己指定的页面,或者在返回之前进行处理.

我有一个angular2包库(称之为A),我使用npm install从另一个不同的angular2项目(称为B)导入.
来自A的所有服务,组件似乎都可以在B项目上运行,它们可以很好地导入注入和使用.
但是,只有简单的类定义才行.即我有一个类定义如下

export class JustAClass{
    public Title:string;
    constructor(title:string){
        this.Title = title;
    }

    getTitleLong():string{
        return 'Long '+this.Title;
    }
}

并在index.d.ts我导出它.

从'./components/test/just'导出{JustAClass};

在项目BI中可以看到just.d.ts文件如下:

export declare class JustAClass {
    Title: string;
    constructor(title: string);
    getTitleLong(): any;
}

我使用webswtorm,当我在项目B的文件中使用这个类时,它给了我intellisence并知道指向我文件定义:

import { JustAClass } from 'my-project-lib-A';

@Component({
    templateUrl: 'orders.html'
})
export class SomePage {
    

    constructor() {

        var d = new JustAClass('aaaa'); // this is undefiend in run time
        console.log(d.getTitleLong());

    }

我得到它'JustAClass'未定义,webpack抛出一个错误:

WEBPACK_IMPORTED_MODULE_2_my-project-lib- A.JustAClass不是构造函数

如果重要的话,我将使用ionic2作为项目B.

我不能建立我的离子2应用程序.更改文件后服务工作.

在离子服务上,我收到以下错误消息:

[07:36:10]  ionic-app-scripts 1.0.0 
[07:36:10]  watch started ... 
[07:36:10]  build dev started ... 
[07:36:10]  clean started ... 
[07:36:10]  clean finished in 1 ms 
[07:36:10]  copy started ... 
[07:36:10]  transpile started ... 
[07:36:15]  build dev failed: Maximum call stack size exceeded 
[07:36:15]  dev server running: http://localhost:8100/ 

然后,当我更改*.ts文件时,应用程序已构建并可以使用

[07:37:32]  build started ... 
[07:37:32]  transpile started ... 
[07:37:39]  build finished in 6.81 s 

当我运行ionic build时,会显示以下错误消息:

[07:40:40]  transpile started ... 
[07:40:44]  build dev failed: Maximum call stack size exceeded 
[07:40:44]  ionic-app-script task: "build" …

我有两个问题ion-buttons.

1. 离子文档仅显示ion-buttons元素的用法,除了您可以从示例中推断出的内容之外,没有真正的解释.

2. 什么让我失望的是,在我看来,关键标签是在错误的地方.

当我在文档上看到这个时,我想知道这是不是一个错误,但我也在堆栈的代码示例中看到了这一点.像这个:

<ion-header>
  <ion-navbar primary>
    <ion-buttons start>       **// here it starts.**
      <button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>  **//Why does ion-buttons close here?** 

    <ion-title>
      My Page
    </ion-title>

    <ion-buttons end> **// END here?** 
      <button  ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons> **// then close AGAIN here when there is no companion open tag?**
  </ion-navbar>
</ion-header>

我在尝试查看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; …