标签: ionic2

翻译按钮离子2

我在离子2中更改了后退按钮的名称,但有人知道如何使用ng2-translate翻译此按钮吗?

this.config.set('backButtonText', 'Go Back'); // < want to translate this with ng2-translate.
Run Code Online (Sandbox Code Playgroud)

typescript ionic2 angular

8
推荐指数
1
解决办法
3724
查看次数

React Native vs Ionic 2

我已经使用Ionic大约1年了,我已经用Ionic框架完成了几个项目(在android和iphone中).我必须经常使用新功能更新我们现有的应用程序.我打算用最新的框架更新项目.我应该选择Ionic 2还是React Native.哪个会耗费时间?因为我必须使用新框架更改所有现有应用程序.我无法决定.优缺点都有什么?

angularjs ionic-framework react-native ionic2 angular

8
推荐指数
2
解决办法
2万
查看次数

Angular2指令修改点击处理

我正在尝试编写一个Angular2属性指令来修改某些元素的行为.更具体地说,我想将属性应用于具有单击处理程序的某些元素,并防止在特定条件下执行绑定函数.

所以现在我有一个元素,例如:

<button (click)="onClick(param1, param2)"></button>
Run Code Online (Sandbox Code Playgroud)

onClick是在承载按钮元素的组件上声明的函数.

我想做的是写一些类似的东西:

<button (click)="onClick(param1, param2)" online-only></button>
Run Code Online (Sandbox Code Playgroud)

并有一个指令,如:

@Directive({
  selector: '[online-only]',
})
export class OnlineOnlyDirective {
  @HostListener('click', ['$event']) 
  onClick(e) {
    if(someCondition){
      e.preventDefault();
      e.stopPropagation();
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

但是首先执行click handler,因此不会给我的指令停止执行.

我想到的第二种方法是用我自己的处理程序替换(单击)例如([onlineClick] ="onClick")并在指令认为合适时执行传递的函数,但这样我就无法将params传递给onClick函数并且有点我们要看看.

做这样的事情你有什么想法吗?

javascript ionic2 angular2-directives angular

8
推荐指数
1
解决办法
9363
查看次数

Ionic 2/angular 2 - 如何使用Typescript将HTML元素添加到我的组件中?

请不要不喜欢标题判断,先阅读帖子.

我刚刚开始学习使用离子2框架的typescript和angular 2.

我正在添加引用typscript变量"newItem"的html元素,如下所示:

<ion-content>
  <ion-list inset>
    <ion-item *ngFor="let item of todos" (click)="edit(item)">
      {{item}}
    </ion-item>
    <ion-item>test</ion-item>
    <div [innerHTML]=newItem></div>
  </ion-list>
</ion-content>
Run Code Online (Sandbox Code Playgroud)

在我的组件的typescript类中,我有一个函数addTodo(),当按下右角的pluss/add图标时,它设置"newItem"的HTML:

  addTodo(){
    this.newItem = "<ion-item>test</ion-item>";
  }
Run Code Online (Sandbox Code Playgroud)

由于某种原因,编译时会忽略"ion-item"标记,它只会向div元素插入"test".

申请将如下所示:

在此输入图像描述

组件类:

在此输入图像描述

所以我尝试将其添加到视图中:

<form *ngIf="editedItem">
  <ion-item><input [(ngModel)]="newItem" name="newItem">
    <ion-buttons end>
      <button ion-button color="danger" (click)="btnCancel()">Cancel</button>
      <button ion-button color="secondary" (click)="btnAdd()">Add</button>
    </ion-buttons>
  </ion-item>
</form>
Run Code Online (Sandbox Code Playgroud)

但现在当我单击取消或添加时,页面需要重新加载.我知道我对[(ngModel)] ="newItem"做错了,我应该尝试将Angular变量传递给模型,还是有更好的方法来做到这一点.

编辑:将变量传递给(单击)函数,如@JoeriShoeby在下面的答案中所示.

在模型中:

export class TodosPage {

newItem = "";
todos: string[] = this.getTodos();
editedItem: boolean = false;

  constructor(public navCtrl: NavController) {

  }

  addTodo(){
    this.editedItem = true;
  }

  btnAdd(){
    this.todos.push(this.newItem);
    this.editedItem …
Run Code Online (Sandbox Code Playgroud)

html ionic-framework ionic2 typescript2.0 angular

8
推荐指数
1
解决办法
2万
查看次数

滚动到Ionic 2中ListiVew的特定项目

我想滚动到离子2中列表视图中的特定项目.我有一个列表视图绑定到数组.

export class TestPage {
    @ViewChild(Content) content: Content;
    public items: Array<Object> = [];

    ionViewWillEnter() {
        console.log(this.navParams.data);
        this.customService.getArray(this.params.index).then((items) => {
            this.items = items;
                //scroll to item
                // this.content.scrollTo()
        });
     }
}
Run Code Online (Sandbox Code Playgroud)

这是观点:

<ion-list [virtualScroll]="items" approxItemHeight="120px" approxItemWidth="100%" 
    class="items-listview list list-md">
  <button class="items-listview-item item item-md" *virtualItem="let item">
    <div class="items-listview-text">
        {{ item.text }}<span>{{item.index}}</span>
    </div>
  </button>
</ion-list>
Run Code Online (Sandbox Code Playgroud)

我看到scrollTo只支持位置,即顶部和左侧,但不支持元素本身.如何滚动列表视图项目(例如项目编号150)本身?如何获得150号项目的位置并将其传递给scrollTo?

typescript ionic-framework ionic2 ionic3 angular

8
推荐指数
2
解决办法
8790
查看次数

Ionic2 - 以编程方式滚动离子滚动

我有一个页面,其中有两个可滚动的视图彼此相邻:

<ion-content>
   <ion-scroll></ion-scroll>
   <ion-scroll></ion-scroll>
</ion-content>
Run Code Online (Sandbox Code Playgroud)

我想以编程方式滚动第一个,但似乎scrollTo只是一个离子内容的方法(我当然不能滚动,我需要第二个独立)

有什么方法可以解决这个问题吗?

更新:添加了一个plnkr来显示我需要的东西

angularjs ionic-framework ionic2 angular

8
推荐指数
1
解决办法
2079
查看次数

离子cordova构建android --prod时出错

致命错误:CALL_AND_RETRY_LAST分配失败 - JavaScript堆内存不足

运行命令时出错:ionic cordova build android --prod

注:该离子构建Android,离子运行的Android和离子成为一切工作正常.

我读过许多话题,说一旦项目变大,就会停止工作.

它是在问题到来前一天工作的.它停止工作,因为我们添加了更多的文件和JSON,用于多语言的应用程序翻译.

这是一个已知的问题吗?有什么解决方案吗?

请检查更多细节:https://youtu.be/oCN7iSt8rzg

附加错误图片:

在此输入图像描述

离子信息:

在此输入图像描述

android cordova ionic-framework ionic2 ionic3

8
推荐指数
1
解决办法
5064
查看次数

如何在Ionic中更换标签时使用导航保护?

我正在使用Ionic 2.我认为应该提示用户在导航时确认他们想要离开(当时播放视频,这可能是偶然的导航).

当用户使用以下代码单击顶部导航中的后退按钮或后退硬件按钮(Android)时,我可以正常工作:

  // About to leave
  ionViewCanLeave() {
    this.api.getDefaultMedia().pause();

    return new Promise((resolve, reject) => {
      if(!this.allowedToLeave) {
        let confirm = this.alertCtrl.create({
          title: 'Are you sure?',
          message: 'If you leave a class you will need to start over.  Are you sure you want to leave?  If you need a break you can pause by tapping the video.',
          buttons: [{
            text: 'OK',
            handler: () => {
              this.allowedToLeave = true;
              resolve();
            },
          }, {
            text: 'Cancel',
            handler: () => {
              reject();
            } …
Run Code Online (Sandbox Code Playgroud)

tabs typescript ionic-framework ionic2 angular

8
推荐指数
1
解决办法
513
查看次数

Ionic:IOS 11 中 wkwebview 底部的空白区域

将 IOS 更新到 11 版本后,wkwebview plugin我的应用程序出现问题。

Ionic 命令发布了 IOS 11清单,但问题是在清单中的所有步骤之后仍然存在。

ios平台版本 4.4.0

任何 sim iPnone 5s、6、6s 上的问题...

在屏幕底部我有空白。有帮助,请。

在此处输入图片说明

更新:我删除cordova-plugin-wkwebview-engine插件后,空白消失了。但是我的应用程序中需要这个插件。

cordova ionic-framework wkwebview ionic2

8
推荐指数
2
解决办法
3889
查看次数

Ionic2 - HTTP 错误 503:POST https://res.ionic.io/api/v1/upload

将icon.psd和spalsh.psd文件放到resources文件夹中并写入后

ionic cordova resources 在终端

我收到了这个回复

`

HTTP Error 503: POST https://res.ionic.io/api/v1/upload
<!DOCTYPE html>
        <html>
          <head>
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <meta charset="utf-8">
                <title>Application Error</title>
                <style media="screen">
                  html,body,iframe {
                        margin: 0;
                        padding: 0;
                  }
                  html,body {
                        height: 100%;
                        overflow: hidden;
                  }
                  iframe {
                        width: 100%;
                        height: 100%;
                        border: 0;
                  }
                </style>
          </head>
          <body>
                <iframe src="//www.herokucdn.com/error-pages/application-error.html"></iframe>
          </body>
        </html>
Run Code Online (Sandbox Code Playgroud)

`

任何人都有这个问题的解决方案?

android ios cordova ionic2 angular

8
推荐指数
2
解决办法
4599
查看次数