标签: 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 2中是否选中了离子复选框.

   <ion-item *ngFor="let a of q.Answers">
      <ion-label>{{a.AnswerDescription}}</ion-label>
      <ion-checkbox (click)="addValue($event)"></ion-checkbox>
   </ion-item>

以下回报 undefined

 addValue(e): void {
     var isChecked = e.currentTarget.checked;
     console.log(isChecked);//undefined

 }

我正在尝试在标题位于中心的离子标题的每一侧添加两个图标,但它总是以右侧的两个图标结束.

这是我的代码

<ion-header>
  <ion-navbar color="primary">
    <ion-buttons start>
      <button ion-button icon-only><ion-icon name="chatboxes"></ion-icon></button>
    </ion-buttons>
    <ion-title>Title</ion-title>
    <ion-buttons end>
      <button ion-button icon-only><ion-icon name="notifications"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

这导致这个标题:

我无法弄清楚,尝试了不同类型的教程,并试图复制他们的例子没有任何成功.它背后也没有造型,所以没有什么可以搞乱布局.感觉就像这个版本的Ionic或其他东西中的"开始"元素一样.有人能指出我正确的方向吗？

运行"离子信息"时这是我的输出:

Your system information:

 ordova CLI: 6.5.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.5
Xcode version: Not installed

我一直试图在离子中创建一个指令,它只是不工作,我似乎不知道为什么.我希望指令允许自动调整大小.因此,当它有更多的文本时,它只是不断调整大小.

这是我的代码:我的项目是一个离子3项目,使用角度4,新版本.

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[auto-resize-text-input]' // Attribute selector
})
export class AutoResizeTextInput {
  constructor(public elem: ElementRef) {
    console.log('Hello AutoResizeTextInput Directive');
  }

  @HostListener('input', ['$event.target']) onInput() {
    this.resizeTextOnInput();
  }

  private resizeTextOnInput() {
    this.elem.nativeElement.style.overflow = 'hidden';
    this.elem.nativeElement.style.height = 'auto';
    this.elem.nativeElement.style.height = this.elem.nativeElement.scrollHeight + "px";
  }
}

请帮忙 ？？？？

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

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 …

我的离子构建工作完美,直到我想在我的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文件夹中,因此我没有遇到任何问题.

我正在使用离子3 ion-slides和ion-slide.我面临的问题是内容在中心,我希望它是顶部对齐的.代码如下:

<ion-content padding>

    <ion-slides pager>
      <ion-slide style="vertical-align:top">
          <ion-card padding>
           <ion-card-header class="ha-card-header">About you</ion-card-header>
              <ion-card-content>
                    <ion-label>Family Size&nbsp;<ion-badge>{{energyProfile.familySize}}</ion-badge></ion-label>
                    <ion-item no-padding>
                        <ion-range [(ngModel)]="energyProfile.familySize" min="0" max="10" step="2">
                          <ion-icon range-left small name="person"></ion-icon>
                          <ion-icon range-right name="people"></ion-icon>
                        </ion-range>
                    </ion-item>
              </ion-card-content>
            </ion-card>
      </ion-slide>
</ion-slides>
<ion-content>

我在我的离子应用程序中使用facebook评论插件,并在index.html中使用下面的代码片段

<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src =   "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11&appId='My_fbApp_Id'";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

最后一个HTML代码显示评论框.

<div class="fb-comments" data-mobile="true" data-width="100%" page-href="https://facebook.com/" data-numposts="15"></div>

这与铬工作正常,但当我构建APK文件并尝试在一秒钟内运行应用评论框隐形请解决我的问题