标签: ionic2

如何更改Ionic 2中导航栏的背景颜色?

我正在尝试改变Ionic 2中的导航栏背景颜色.我尝试了很多东西,比如class ="bar bar-stable"等

现在我的代码看起来像这样:

<ion-navbar  *navbar> 
Run Code Online (Sandbox Code Playgroud)

所以背景当前是灰色的(默认)

mobile cordova ionic-framework ionic ionic2

9
推荐指数
3
解决办法
1万
查看次数

CSS - 这种情况最好用什么(px,%,vw,wh或em)?

我正在使用Ionic2开发应用程序,我正处于需要以不同大小预览应用程序的步骤中.目前我在所有大小,字体大小,填充等使用vw ...但是当调整字体大小有时变得有点小,甚至有时文本往往不可读; 为此,我想知道在这种情况下最好使用什么(px,%,vw,wh或em).

或者我还需要使用@media并支持不同的字体大小?

有什么想法吗?

html css ionic2

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

Angular 2:在本地.json文件中找不到文件

我看过一些不同的帖子,关于无法找到本地文件来打开它们,无论它们是图像还是数据文件,但没有一个解决方案对我有用.我的猜测是有一些我缺少的配置.

我正在寻找的文件位于与我的app.html和app.ts文件相同级别的名为"data"的文件夹中.

这是我在app.html中的内容,PS我也在使用Ionic2:

<ion-menu (click)='getDepartments()' side='right' type='overlay' [content]="content">
Run Code Online (Sandbox Code Playgroud)

在app.ts文件中我有:

getDepartments() {
    this.http.get('/data/data.json')
        .map(res => res.json())
        .subscribe(
            data => this.departments = data,
            err => console.log(err),
            () => console.log('Random Quote Complete')
        );
}
Run Code Online (Sandbox Code Playgroud)

我试过了:

./data/data.json

data/data.json

app/data/data.json
Run Code Online (Sandbox Code Playgroud)

和任何其他路径.并且它们都返回404文件未找到错误.这似乎就像熟悉Angular 2一样成长.先谢谢

html javascript file ionic2 angular

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

Ionic2,将NavController注入可注射服务

我使用Ionic2框架在Angular2中使用Injectable Service时遇到问题.

我的服务如下:

import {Injectable} from '@angular/core';
import {NavController} from 'ionic-angular';

@Injectable()
export class ViewStackController {
  static get parameters() {
    return [[NavController]];
  }

  constructor(nav) {
  }
}
Run Code Online (Sandbox Code Playgroud)

我得到错误No provider for NavController.这很奇怪,因为在任何Page类中它都有效,尽管它有@Component,但也许这就是问题所在.

编辑#1:

我正在提供这项服务ionicBootstrap,如下所示:

ionicBootstrap(MyApp, [ViewStackController], {});
Run Code Online (Sandbox Code Playgroud)

typescript ionic-framework ionic2 ionic3 angular

9
推荐指数
1
解决办法
7167
查看次数

Ionic 2 - 将背景图像添加到页面

我刚刚安装了一个新的Ionic项目 - Ionic v2.0.0-beta.32

我想在新安装的主页上添加背景图片,有没有人可以告诉我我是怎么做到这一点的?所有我能找到的是Ionic 1的信息,事情似乎有很大的不同.

从我发现的,图像需要是以下的尺寸

2800px x 2800px
Run Code Online (Sandbox Code Playgroud)

但除此之外,我找不到任何其他教程.

这是我的第一个离子项目,所以要温柔

谢谢你们

ionic-framework ionic2

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

为什么Yarn不在.bin文件夹中安装所有可执行文件?

我刚刚开始使用Yarn包管理器,我下载了一个启动Ionic 2项目.

在这个项目中,我们从编译,缩小,lint和捆绑代码的脚本中获得了很多帮助.所有这些都是由ionic-app-scripts提供的,它有几个依赖项,用于运行命令.

问题是当我使用Yarn进行安装时,node_modules/.bin /文件夹不包含所有必需的可执行文件,例如tslint,这是ionic-app-scripts的依赖项,所以它不是直接在我的package.json.

结果是当我使用Yarn时,ionic-app-scripts不起作用,因为它期望该.bin文件夹包含tslint可执行文件!

我能做什么?ionic-app-scripts的定义是一个问题吗?

[注意]:npm install工作正常,但Yarn更快!

npm ionic2 yarnpkg

9
推荐指数
1
解决办法
2715
查看次数

用于翻译UX`pan`手势以设置没有上限的线性值的策略

我正在尝试使用pan手势设置滑块(实际上是厨房计时器),ionic2请参阅:http://ionicframework.com/docs/v2/components/#gestures

滑块/计时器有一个开放的上限,可以由a设置panright,但在a上下降到零panleft.

如何才能最好地将pan事件转换为速度敏感度,以允许上限接近36000但是足够敏感以设置小到10的增量?最大值deltaX约为400px,但我想用户可以使用几个pan手势来达到很大的值.

是否有一些现成的easing功能可以用来实现这个目的?

algorithm hammer.js ionic2 angular

9
推荐指数
1
解决办法
106
查看次数

离子3,延迟加载标签组件

我正在尝试使用延迟加载创建一个离子3选项卡应用程序,而无需导入组件.

在我的app.component.ts中

 rootPage:string = "Tabs";
Run Code Online (Sandbox Code Playgroud)

在tabs.html中

<ion-tabs>
<ion-tab [root]="Favorites" tabTitle="fav" tabIcon="star"></ion-tab>
<ion-tab [root]="libaray" tabTitle="Library" tabIcon="book"></ion-tab>
</ion-tabs>
Run Code Online (Sandbox Code Playgroud)

在Favorites.module.ts中

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Favorites } from './favorites';

@NgModule({
  declarations: [
    Favorites,
  ],
  imports: [
    IonicPageModule.forChild(Favorites),
  ],
  exports: [
    Favorites
  ]
})
export class FavoritesModule {}
Run Code Online (Sandbox Code Playgroud)

到目前为止,标签页成功加载但没有视图(空白页).我认为我使用[root]属性与延迟加载的问题!怎么解决这个问题?

谢谢

ionic2 ionic3 angular

9
推荐指数
1
解决办法
6348
查看次数

警报控制器输入框验证

如何验证和显示Ionic 2或3中警报控制器中输入的错误

let prompt = Alert.create({
      title: 'Alert input validation',
      message: "How can I validate below input field?",
      inputs: [ 
        {
          name: 'email',
          placeholder: 'email'
        },
      ],
      buttons: [
        {
          text: 'Save',
          handler: data => {
                        let validateObj = this.validateEmail(data);
                        if (!validateObj.isValid) {
                            alert(validateObj.message);
                            return false;
                        } else {
                            //make HTTP call
                        }
                    }
        }
      ]
    });
Run Code Online (Sandbox Code Playgroud)

有人已经更新了警报控制器,并确实拉动了Ionic团队的请求.我认为Ionic团队规划将来会实现这一点. https://github.com/ionic-team/ionic/pull/12541

我需要一些解决此验证功能的方法.

plnkr http://plnkr.co/edit/IBonfBJngky0h8UtMwMD?p=preview

感谢您的帮助.

typescript ionic-framework ionic2 ionic3 angular

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

无法将组件加载到页面中 - Angular 4/Ionic 3

页面上显示一个按钮.当用户选择子组件将出现的按钮时,会出现以下错误 - 错误:未捕获(在承诺中):错误:找不到ModalComponent的组件工厂.你有没有把它添加到@ NgModule.entryComponents?

我设置的结构如下,这与Ionic 3一起 -

app (folder) 
 - app.module
 - app.component

components (folder)
 - modal-component.ts

pages (folder)
 - pageOne (folder)
   - pageOne.module
   - pageOne.ts
Run Code Online (Sandbox Code Playgroud)

我把模态组件放在pageOne.module中

pageOne.module

@NgModule({
    declarations: [
        pageOne,
        modalComponent

    ],
    entryComponents: [
        modalComponent
    ],
    imports: [
        IonicPageModule.forChild(pageOne),
    ],
    exports: [
        pageOne,

    ]
})
export class pageOneModule {}
Run Code Online (Sandbox Code Playgroud)

pageOne.ts

@IonicPage()

@Component({
  selector: 'pageOne',
  templateUrl: 'pageOne.html',

})
export class pageOne {}
Run Code Online (Sandbox Code Playgroud)

javascript typescript ionic-framework ionic2 angular

9
推荐指数
1
解决办法
488
查看次数