标签: ionic2

我想在离子2应用程序中创建一个侧面菜单,其中页面导航组件放在一个外部json文件中,该文件是在menuService.getMenu函数的帮助下获取的.

MY JSON结构:

"menu":[
        {
          "title":"Grid",
          "component":"GridPage"
        }
      ]

我的Ts:

    this.menuService.getMenu().then((menu) => {
    this.menu = menu;
    });

    openPage(menu) {
      console.log("menu", menu.component);
      nav.setRoot(menu.component);
    }

控制台日志打印字符串GridPage.我尝试使用Type作为Type(menu.component)进行转换.但我在控制台中的结果是一个具有匿名名称的函数.有人请帮助我将json字符串转换为组件"Type"以便导航工作.

我很难理解如何在不触发UI事件的情况下将组件内的属性更改传播到实际视图.如果我来回走动,UI会更新.

这是我的组件,它每秒检索一次BLE通知.每次通知后,需要在视图中更新通知的结果值.我可以在开发者控制台中看到显示的通知.

import { Component, ChangeDetectionStrategy, ChangeDetectorRef, Input, Output} from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { BLE } from 'ionic-native';
import {Observable} from 'rxjs/Observable';


@Component({
templateUrl: 'build/pages/devices/devices.html',
//changeDetection: ChangeDetectionStrategy.OnPush
})

export class DevicePage {

private nav:NavController = null;
private navParams:NavParams = null;
private device:any;
private connecting:any;
private characteristics:any;
private data:any;
private temp:any;


static get parameters() {
  return [[NavParams],[NavController]];
}
//
constructor(navParams, nav, private cd:ChangeDetectorRef ) {
  this.nav = nav;
  this.navParams = navParams;
  this.device = this.navParams.get('device');
  this.connect(this.device.id); …

按照Josh Morony教程创建的Ionic 2 Native地图:

http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/.

一切都很好.这是问题所在:

我的视图有一个侧面菜单,当我点击侧面菜单时,它会出现切换,但里面的选项是不可点击的.当我双击模拟器中的菜单选项时,地图会放大.地图重叠了我的侧边菜单,是否有针对此紧急情况的解决方案？

谢谢.

目前我正在为android和ios开发离子2项目.我在启动画面之后和主页面之前看到了白色的空白屏幕.此空白页需要9或8秒才能完成.我使用以下命令

ionic start CoeTutorial tutorial --v2
ionic resources    
ionic platform add android
ionic run android

为什么白色空白屏幕会出现以及如何使其更快？

这是我的项目链接:https: //drive.google.com/file/d/0B8MgjhwD8M3UTVprWEd1cEk2dW8/view?usp=sharing

需要输入

npm install 

下载此示例项目后.

根据我对Ionic文档和问题的理解,例如: 如何在推送新页面时保留标签？

我已经正确地完成了防止我的标签栏被隐藏的必要条件.要清楚,标签栏正确显示何时在任何标签页上开始导航,然后转到堆栈中的任何其他标签页.无论何时使用导航控制器或模态控制器等的"推"方法,标签栏都会消失.我哪里错了？

在下面的代码中,当第一次下载应用程序时,此人登陆演练.有一个按钮,然后将它们带到标签栏也应该是的目录.

在用户已经看过漫游的情况下,根页面被设置为主页,其中存在标签栏.如果用户使用标签栏从主页导航到目录页面,则标签栏会保留在页面底部的正确位置.

从我的理解中添加tabsHideOnSubPages:false到app.module.ts将阻止此行为,但它不会.

app.module.ts ...

imports: [
    IonicModule.forRoot(MyApp, {
       tabsHideOnSubPages:false
    })
]

...

app.component.ts ...

import { Tabs } from '../pages/tabs/tabs';
import { Walkthrough } from '../pages/walkthrough/walkthrough';
@Component({
  templateUrl: 'app.html'
})

export class MyApp {
  rootPage: any = Tabs;
  launchObject:any;
   constructor(private platform: Platform){
     platform.ready().then(() => {
       if(justDownloadedApp){
         this.rootPage = Walkthrough;
       }
     })
   }
 }

...

app.component.html

<ion-nav [root]="rootPage"></ion-nav>

tabs.ts

import { Component } from '@angular/core';
import { Home } from '../home/home';
import { Directory } from '../directory/directory'; …

我正在使用ion-datetime作为我的预约表格.插入它时工作正常没有任何问题.但是当我需要从后端更新插入的约会日期表单详细信息时,日期值不会显示在ion-datetime中.

以下是我的代码:

update.html:

<ion-item class="border-bottom">
      <ion-label  class="ionselect" >Appointment Date:</ion-label>
      <ion-datetime name="appdate" displayFormat="YYYY MMM DD" [(ngModel)]="leadDetailsUpdate.appt_date"></ion-datetime>
</ion-item>

update.ts:

leadDetailsUpdate={
        appt_date:''
}; 

我从后端获得的日期格式如下: appt_date: "2017-01-01"

以下是我在控制台中收到的错误消息:

Error parsing date: "null". Please provide a valid ISO 8601 datetime format: https://www.w3.org/TR/NOTE-datetime

我是Ionic的初学者2.我想在点击列表项后将Json数据从一个页面传递到另一个页面.列表中的项目来自json,并且具有与每个项目相关联的特定ID.所以我想在特定项目上的点击事件之后传递特定的id.

这是json链接:

1. http://factoryunlock.in//products借助此链接,我将在列表中显示产品

2.但现在我想表明,特定项目的细节.所以我用这个链接

http://factoryunlock.in/products/1

我想products/1在特定项目的click事件后更改该ID(在链接2中).

这是我的Listview代码(Second.ts).

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { EarthquakesProvider } from '../../providers/earthquakes/earthquakes';
import { DetailsPage } from '../details/details';
import { ChartsPage } from '../charts/charts';


@IonicPage()
@Component({
  selector: 'page-second',
  templateUrl: 'second.html',
  providers: [EarthquakesProvider]
})
export class SecondPage {

    public DateList: Array<Object>;

    constructor(public _navCtrl: NavController,
        public _earthquakes: EarthquakesProvider) {

       this.getEarthquakes();

    }
    public Listitem(l) {
        this._navCtrl.push(DetailsPage
            );

    }

    public openModal() {
        this._navCtrl.push(ChartsPage);

    } …

我坚持将自定义组件导入Ionic 3中的页面.这在Ionic 2中相对微不足道,但我似乎无法在Ionic 3中使用它.

我有一个名为现有页面模块other.经过运行ionic g component test,我导入自动生成的ComponentsModule进入other.module.ts,并把它添加到imports阵列.

import { ComponentsModule } from "../../components/components.module";
@NgModule({
  declarations: [
    OtherPage,
  ],
  imports: [
    IonicPageModule.forChild(OtherPage),
    ComponentsModule,

    ],
})
export class OtherPageModule {}

然后我将组件选择器添加到页面中<test></test>.

这会导致错误:

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
'test' is not a known element:
1. If 'test' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to …

在下面的代码中,我发布了两个代码在控制台中返回的示例.对于拦截器,我应该返回一个可观察的.我已将本地存储承诺转换为使用switchmap的可观察对象.我仍然使用这种方法返回null.我的observable包含在函数中,所以我应该得到一个null以外的值.谢谢!

Interceptor.js

import { fromPromise } from 'rxjs/observable/fromPromise';

accessToken: string; 
emptyToken: any;


    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

//example

        this.storage.get('token').then((val) => {
             this.accessToken = val
            return console.log(this.accessToken, ' this is returning null value for token')
        })

//trying to return actual header
          return fromPromise(this.storage.get('token')).switchMap(access => {

            this.accessToken = access
            console.log(this.accessToken, ' this is returning null value for token')
            const authReq = req.clone({
                setHeaders: {
                Authorization: this.accessToken
                }
                });

                return next.handle(authReq)
           })
}
}

我已经添加了下面更新的代码,请忽略上面的代码并仍然得到相同的结果.作为下面所述的答案之一,它们在所有假设中都是正确的.归结为将令牌置于登录observable内部.问题不在于拦截器,代码工作正常.我需要以某种方式获取我的异步值而不返回null.this.storage.ready()方法也给了我相同的结果.我的拦截器后调用了auth服务,因此我还没有生成任何令牌.我将如何首先调用我的身份验证服务？

login(userName: string, password: string, route: …

我Angular SVG round progressbar为我的离子项目阅读并安装了这个,但它对我不起作用,
https://github.com/crisbeto/angular-svg-round-progressbar

如何正确添加此页面？请帮我解决这个显示此错误

Error: Template parse errors:
Can't bind to 'current' since it isn't a known property of 'round-progress'.
1. If 'round-progress' is an Angular component and it has 'current' input, then verify that it is part of this module.
2. If 'round-progress' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component

Run Code Online (Sandbox Code Playgroud)

压制此消息.3.要允许任何属性将"NO_ERRORS_SCHEMA"添加到此组件的"@NgModule.schemas".("

  <round-progress [ERROR ->][current]="48" [max]="100"></round-progress>
</ion-content>

")

Run Code Online (Sandbox Code Playgroud)

谢谢

我的页面为我添加了home.html

<round-progress
    [current]="current"
    [max]="max"
    [color]="'#45ccce'"
    [background]="'#eaeaea'"
    [radius]="125"
    [stroke]="20"
    [semicircle]="true"
    [rounded]="true" …