标签: ionic2

我有2页Page1 and Page2.我this.nav.pop()在Page2中使用它会弹出Page2和Page1会启用但我想刷新Page1.先感谢您.

我正在使用sidemenu ionic 2.当我从左向右滑动此页面时,侧面菜单滑出我需要在特定页面中禁用侧面菜单.

app.html

    <ion-menu [content]="content">
     <ion-content>
      <ion-list>
       <button ion-item *ngFor="let p of pages" menuClose (click)="openPage(p)" >
        <ion-icon name="{{p.icon}}" item-left></ion-icon>
        {{p.title}}
      </button>
     </ion-list>
  </ion-content>
</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="true"></ion-nav>

page.html我在此页面中禁用了swipemenu,仅在我滑动时禁用

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/portrait/portrait.html'
})
export class Portrait {
}

page.html中

<ion-navbar persianred *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>
   Portrait
  </ion-title>
</ion-navbar>

我想插入一个标签,以便匹配Fab列表中每个FAB图标的正确方法.我这样做的方式不起作用

<ion-fab left middle>
  <button ion-fab color="dark">
    <ion-icon name="arrow-dropup"></ion-icon>
    <ion-label>here</ion-label>
  </button>
  <ion-fab-list side="top">
    <button ion-fab>
      <ion-icon name="logo-facebook"></ion-icon>
      <ion-label>here</ion-label>
    </button>
    <button ion-fab>
      <ion-icon name="logo-twitter"></ion-icon>
    </button>
    <button ion-fab>
      <ion-icon name="logo-vimeo"></ion-icon>
    </button>
    <button ion-fab>
      <ion-icon name="logo-googleplus"></ion-icon>
    </button>
  </ion-fab-list>
</ion-fab>

我在Ionic 2的项目上工作,到目前为止我已经实现了地图,但我无法摆脱这一点.为了将Google Place和Autocomplete添加到项目中,我需要按照我应该的方式展示.

我能做什么？

HTML:

<ion-row>
  <ion-item>
    <ion-label>Search</ion-label>
    <ion-input id="places" type="text" name="search"></ion-input>       
</ion-row>
<div #map id="map"></div>

HOME.ts

export class HomePage {

public latitude: number;
public longitude: number;

@ViewChild('map') mapElement;
map: any;
marker: any;
search: string;

constructor(public navCtrl: NavController, public platform: Platform) {
 /*platform.ready().then(() => {
  this.InitMap();
 });*/
}
 ionViewDidLoad(){
 this.InitMap();
}

InitMap() {

  this.setLocation();
  let input = document.getElementById('places');
  let autocomplete = new google.maps.places.Autocomplete(input);

  google.maps.event.addListener(autocomplete, 'place_changed', () => {

    let place = autocomplete.getPlace();
    this.latitude = place.geometry.location.lat();
    this.longitude = place.geometry.location.lng();
    alert(this.latitude + …

我正在尝试在我的ionic2 hello world项目中使用geolocation,并按照官方网站上的说明添加离子插件"Geolocation" .

我运行了这两个命令:

$ ionic plugin add cordova-plugin-geolocation
$ npm install --save @ionic-native/geolocation

这是我的家.:

import { Component } from '@angular/core';
import {Geolocation} from '@ionic-native/geolocation'
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  map:any=null;
  geoInfo:any={
      resp:'',
      data:''
  };

  constructor(
      public navCtrl: NavController,
      private geolocation: Geolocation
  ) {

  }

  test(){
      this.geolocation.getCurrentPosition().then((resp) => {
          this.geoInfo.resp=JSON.stringify(resp);
          // resp.coords.latitude
          // resp.coords.longitude
      }).catch((error) => {
          console.log('Error getting location', error);
          this.geoInfo.resp='Error getting location';
      });

      let …

我试图通过使用来避免嵌套的observable forkjoin.当前(嵌套)版本如下所示:

  this.http.get('https://testdb1.firebaseio.com/.json').map(res => res.json()).subscribe(data_changes => {
    this.http.get('https://testdb2.firebaseio.com/.json').map(res => res.json()).subscribe(data_all => {
      /* Do this once resolved */
      this.platform.ready().then(() => {
        this.storage.set('data_changes', data_changes);
        this.storage.set('data_all', data_all);
        document.getElementById("chart").innerHTML = "";
        this.createChart();
      });
    });
  },

    err => {
      this.platform.ready().then(() => {
        console.log("server error 2");
        document.getElementById("chart").innerHTML = "";
        this.createChart();
      });
    });
  }

我可以将第一部分重写为:

Observable.forkJoin(
  this.http.get('https://testdb1.firebaseio.com/.json').map((res: Response) => res.json()),
  this.http.get('https://testdb2.firebaseio.com/.json').map((res: Response) => res.json())
)

但我不知道如何添加.subscribe方法来访问data_changes和data_all.

看另一个例子,我知道它应该看起来像.subscribe(res => this.combined = {friends:res[0].friends, customer:res[1]});,但我不知道如何适应我的例子.

我将服务定义为类,如下所示:

@Injectable()
export class MyService {
 ...
}

在其他组件或页面中,我只使用import命令导入该类.

import { MyService } from '../pages/services/myservice';

在构造函数中:

constructor(public _MyService: MyService)

在我的主app.module.ts中,我已将该类服务添加为提供者.

providers: [someOtherThings, MyService, someOtherThings]

在Ionic 2中,事情按预期工作.服务是单身人士.

但是在使用角度4的Ionic 3中,看起来每个组件都在创建该类的新实例.

是否有一些在角度4中创建单例服务类的新方法？

我刚刚开始使用Ionic 2.我img在app里面创建了一个文件,它是一个文件logo.png.所以我创建了以下代码:

CSS:

.getting-started {
  .logo {
      background-image: url(./img/logo.png);
  }
}

HTML:

  <ion-col offset-33 width-33 class="logo"><h1>Logo</h1></ion-col>
  <h3>Welcome to your first Ionic app!</h3>

</ion-content>

我知道css正在工作,好像我切换背景颜色,我得到了预期的结果.但是,我没有得到任何背景图片,只是指定了Logo文本.我应该把图像文件放在哪里？

尝试从一个页面推送到另一个页面时出错.当我尝试推送到同一页面时,它不会给出错误.只有从一个页面推送到另一个页面时才会出错.'setRoot()'也没有给出错误.

this.navCtrl.push( Page7 );

我已将Page7添加到app.module.ts.

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { Page3 } from '../pages/page3/page3';
import { Page4 } from '../pages/page4/page4';
import { Page5 } from '../pages/page5/page5';
import { Page6 } from '../pages/page6/page6';
import { Page7 } from '../pages/page7/page7';

@NgModule({
declarations: [
MyApp,
Page1,
Page2,
Page3,
Page4,
Page5,
Page6,
Page7
],
imports: [ …

情况:

在我的Ionic 2应用程序中,我有一个简单的登录,其中包含在右侧菜单中.单击标题中的右侧图标 - 将显示带有登录表单的菜单.

登录代码位于app.component内,登录视图为app.html.成功登录会将布尔全局变量 - loginState - 设置为true.

目标是每个其他组件 - 导入全局变量 - 都可以知道登录状态.

问题是 - 在成功登录后,我需要看到更改立即反映在homePage组件上,但事实并非如此.

例如,在主页上,登录后应立即为您提供某些内容.

代码:

这是我在一个名为global.ts的单独文件中设置全局变量的地方,然后我将其导入其他组件:

export var global = {
    loginState : false
};

app.component:

这是我导入全局变量并在成功登录后将其设置为true的应用程序组件:

import {global} from "./global";

loginSubmit()
{
    var email = this.loginForm.value.email.trim();
    var password = this.loginForm.value.password.trim();

    this.userService.submitLogin(email, password)
        .subscribe((response) => {
            if(response.result == 1) 
            {
                global.loginState = true;
                this.menu.close();
            }
        }, (error) => {
            console.log(error);
        });

}

问题:

应该采取什么方式来处理全局变量的变化,这些变量会立即反映在其他组件上？

我可以从app.component调用homePage组件方法吗？

谢谢!