标签: ionic2

我正在制作一个示例应用程序来连接到离线2 in typescript中的websocket服务器.回到repo

我的要求是在应用程序启动期间进行websocket连接

我正在使用angular2-websocket来创建连接.

参考文献:

1. http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html

2. http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html

我收到错误"无法解析'$ WebSocket'的所有参数(字符串,数组,？).确保所有参数都使用Inject进行修饰或具有有效的类型注释,并且'$ WebSocket'使用Injectable进行修饰. "

代码: app.ts

import {App, Platform} from 'ionic-framework/ionic';
import {TabsPage} from './pages/tabs/tabs';
import {ConnectionService} from './framework/connection/connection-service'
import {$WebSocket} from 'angular2-websocket/angular2-websocket';
import {bootstrap} from 'angular2/platform/browser';

// https://angular.io/docs/ts/latest/api/core/Type-interface.html
import {Type} from 'angular2/core';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {}
})
export class MyApp {
  rootPage: Type = TabsPage;

  constructor(platform: Platform, private conn : ConnectionService) {
    platform.ready().then(() => {
      this.conn.connect();
    });
  }
}
bootstrap(MyApp, [$WebSocket, ConnectionService]);

连接service.ts

import {Injectable, Component, …

所以我试图从离子1开始使用离子2,并且需要一些关于如何在我的项目中设置身份验证的指导.具体来说,我正在使用firebase和angularfire2.

作为一般方法,我应该:

一个.检查app.ts上的session/localStorage,如果未经身份验证,请将rootPage设置为登录？如果我将用户注销并将导航根页面设置回登录,则使用此方法,选项卡将显示在底部.

湾 创建登录页面作为模式,删除显示在底部的选项卡的问题,但我不确定是否应该从app.ts启动模式,因为我不确定应用程序本身是否具有根视图我应该参考.

另外,我应该将auth登录和注销设置为服务并重构,而不是将其放在登录页面和配置文件控制器中的注销按钮中吗？

到目前为止,这是我使用方法A的逻辑:

app.ts

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(() => {
      StatusBar.styleDefault();
    });
  }
}

在myProfile.ts中

  logout() {
    this.local.remove('user');
    this.user = null;
    let modal = Modal.create(LoginPage);
    this.nav.present(modal); //should I set the rootPage instead?  if so how do I remove the tabBar or set the rootpage of the containing app …

我们用

   <widget id="com.activityo" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

对于Android,需要更改ios的小部件ID.我的意思是我想为不同的平台使用2个不同的小部件ID.

反正呢？谢谢

根据我对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 …

当我尝试使用以下命令构建我的应用程序时,我遇到了一个问题:

ionic cordova run android --prod --release

如果我运行如下命令,一切运行正常:

ionic cordova run android

我得到的错误是:

错误:无法确定C:/test/src/pages/cart/cart-items.ts中类CartItemsPage的模块!将CartItemsPage添加到NgModule以修复它.无法确定C:/test/src/pages/items/items.ts中类ItemsPage的模块!将ItemsPage添加到NgModule以修复它.无法在C:/test/src/pages/user-home/user-home.ts中确定类UserHomePage的模块!将用户主页添加到NgModule以修复它.无法确定C语言中的ForgotPasswordPage类的模块:/ test/src/pages/forgot-password/forgot-pas sword.ts!将ForgotPasswordPage添加到NgModule以修复它.无法在C:/test/src/pages/login/login.ts中确定类LoginPage的模块!将LoginPage添加到NgModule以修复它.无法在C:/test/src/pages/signup/signup.ts中确定类SignupPage的模块!将SignupPage添加到NgModule以修复它.无法在C:/test/src/pages/welcome/welcome.ts中确定欢迎页面类的模块!将WelcomePa ge添加到NgModule以修复它.无法在C:/test/src/pages/pincode/pincode.ts中确定PincodePage类的模块!将PincodePa ge添加到NgModule以修复它.无法在C:/test/src/pages/app-home/app-home.ts中确定AppHomePage类的模块!将AppHome页面添加到NgModule以修复它.无法在C:/test/src/pages/profile/profile.ts中确定类ProfilePage的模块!将ProfilePa ge添加到NgModule以修复它.无法在C:/test/src/pages/myorders/order-detail.ts中确定OrderDetailPage类的模块!将OrderDetailPage添加到NgModule以修复它.无法在C:/test/src/pages/myorders/myorders.ts中确定MyOrdersPage类的模块!将MyOrde rsPage添加到NgModule以修复它.无法在C:/test/src/pages/logout/logout.ts中确定类LogoutPage的模块!将LogoutPage添加到NgModule以修复它.无法在C:/test/src/app/app.component.ts中确定MyApp类的模块!将MyApp添加到NgModu文件中以进行修复.无法在C:/test/src/utils/pipes/RemoveUnderscore.ts中确定类RemoveUnderscorePipe的模块!将RemoveUnderscorePipe添加到NgModule以修复它.

但我已将我的所有页面和管道添加到app.module.ts,如下所示:

// Imports

// The translate loader needs to know where to load i18n files
// in Ionic's static asset pipeline.
export function HttpLoaderFactory(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}


let pages:any = [
  MyApp,
  LoginPage,
  UserHomePage,
  SignupPage,
  AppHomePage,
  WelcomePage,
  ItemsPage,
  CartItemsPage,
  ProfilePage,
  MyOrdersPage,
  OrderDetailPage,
  ForgotPasswordPage,
  PincodePage,
  LogoutPage
];

let pipes = [RemoveUnderscorePipe];

export function declarations() {
  return …

我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" …

我的离子构建工作完美,直到我想在我的iPhone上测试,所以我停止了我的服务器,然后做了一个ionic serve --address localhost,我注意到我的样式表不再加载...所以我杀了服务器再次回到ionic serve和错误坚持..

(index):1拒绝从' http:// localhost:8100/build/main.css ' 应用样式,因为它的MIME类型('text/html')不是受支持的样式表MIME类型,并且启用了严格的MIME检查.

我已经尝试清除缓存localhost:8100并重建项目,但错误仍然存​​在......

有任何想法吗？我几乎被困住直到这个问题得到解决:(

编辑:我最终修复它的方式可能不是最好的..但至少它再次起作用.我刚进入我的github存储库,我的应用程序已下载main.css并粘贴到build文件夹中,因此我没有遇到任何问题.