标签: ionic3

有没有办法在程序中检测ionic serveCLI正在运行(然后不在真实设备上)并将其用作条件.

我的问题:我有一个Cordova插件,可以回复Cordova的答案.

当我使用Ripple时,它提供选择将回调的值发送回JavaScript(以模拟插件结果).

我注意到Ionic2在浏览器中运行时没有这样做.因此,为了简化我的开发并使其能够在浏览器上进行测试(而不是经常构建到真实设备),我希望能够在ionic serveCLI运行时检入程序.换句话说:检查它是在真实设备还是常规浏览器上运行.

如果它在浏览器上运行,那么我会使用提示要求用户输入Cordova插件结果的虚拟值,而不是真正的Cordova插件.

我想表明4 ion-items我ion-list在一排.

由于我使用的是Bootstrap,我试图这样做:

<button class="col-sm-3" ion-item *ngFor="let player of players">
    <ion-avatar item-left>
      <img [src]="user.photoURL">
    </ion-avatar>
    {{ user.name }}
  </button>

但它不起作用.

我正在使用Ionic 2,其中一个组件有两个组件,数据是使用发射器共享的.但是当我执行程序时,就出现了这个错误.

运行时错误未捕获(在promise中):TypeError:无法读取未定义的TypeError错误属性'BillNo':无法读取Object.eval中未定义的属性'BillNo'[as updateDirectives]

这是我的代码:

比尔 - settlement.html

...
<page-bill-list (BillSelected)="onBillSelected($event)"></page-bill-list>
...
<page-bill-details [billItem]="billItem"></page-bill-details>
...

比尔 - settlement.ts

@Component({
  selector: 'page-bill-settlement',
  templateUrl: 'bill-settlement.html',
})
export class BillSettlement {
  ...
  billItem: BillDetail
  ...
  onBillSelected(billData: BillDetail) {
    this.billItem = billData
  }
}

比尔 - list.html

<ion-buttons>
  <button ion-button *ngFor="let item of billItems" (click)="getBillDetails(item)">
      {{item.BillNo}}
  </button>
</ion-buttons>

比尔 - list.ts

@Component({
  selector: 'page-bill-list',
  templateUrl: 'bill-list.html',
})
export class BillList {
  billItems: BillDetail[] = []
  billItem = new BillDetail()
  @Output() BillSelected = new EventEmitter<BillDetail>() …

尝试使用以下内容运行prod构建时,我收到以下错误

离子cordova构建浏览器--prod

在终端中收到很多警告

FormBuilder已声明但从未使用过

即使在我的代码中,我正在导入它并使用它,例如

import { Validators, FormGroup, FormBuilder } from '@angular/forms';

public form: FormGroup;

constructor(
    private formBuilder: FormBuilder
  ) {

setForm(){
    this.form = this.formBuilder.group({
      password: ['', Validators.required],
      password2: ['', Validators.required]
    });
  }

有人有过类似的问题吗？我猜这将与npm包更新有关.

任何建议都会很棒.

谢谢!

我找不到单个文档来解释如何在段中使用可选参数.

在我的app.module.ts中,我有这个deepLinkConfig:

let deepLinkConfig = {
  links: [{
    component: HomePage, name: 'Home', segment: 'home'
  }, {
    component: ConnexionPage, name: 'Connexion', segment: 'connexion'
  }, {
    component: InscriptionPage, name: 'Inscription', segment: 'inscription'
  }, {
    component: ProfilePage, name: 'Profile', segment: 'profile/:userId'
  }, {
    component: ExplorePage, name: 'Explore', segment: 'explore'
  }, {
    component: FAQPage, name: 'FAQ', segment: 'faq'
  }]
};

...
imports: [
    ...
    IonicModule.forRoot(MyApp, {}, deepLinkConfig);
],

用户应该能够通过访问他的个人资料/profile,但也可以咨询其他用户的个人资料/profile/:userId.但是当我尝试访问/配置文件时,我收到一个错误:

未捕获(承诺):要插入的视图无效

通过navCtrl,可以使用空字符串作为userId转到'profile',但是一旦你实现了页面,它就会变成空白.

有没有办法让深层链接中的参数可选？

我试图在promise解析后返回一个布尔值,但是typescript会给出错误说法

A 'get' accessor must return a value.

我的代码看起来像.

get tokenValid(): boolean {
    // Check if current time is past access token's expiration
    this.storage.get('expires_at').then((expiresAt) => {
      return Date.now() < expiresAt;
    }).catch((err) => { return false });
}

此代码适用于Ionic 3 Application,存储是Ionic Storage实例.

我有一个带有两个标签的标签组件.按钮是可单击的,单击按钮所在的位置正确显示选项卡内容,但按钮不可见.

<ion-header>
  <ion-navbar>
    <ion-title>{{coupon.title}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div class="coupon-image-container">
    <img src={{coupon.mainImage}}/>
    <button ion-button class="left">Redeem</button>
  </div>
  <ion-tabs class="coupon-tabs">
    <ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab>
    <ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab>
  </ion-tabs>
</ion-content>

我不认为任何其他代码是必要的,但如果需要我会提供更多.就像我说的那样mapTab,infoTab组件的内容显示得很好,点击标签按钮应该在哪里切换它们,但按钮只是空白.

编辑:以防万一有人要问,如果我删除除组件组件之外的组件中的所有其他内容,它仍然会做同样的事情:

<ion-tabs class="coupon-tabs">
  <ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab>
  <ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab>
</ion-tabs>

所以它绝对与其他内容无关.

编辑:我做了一个显示问题的GIF:http://g.recordit.co/WDkjkSz6re.gif

编辑:这是ion-tab上的样式

element.style {
}
main.css:25224
.coupon-tabs ion-tab {
    color: black;
    top: 56px;
}
main.css:5136
ion-tab.show-tab {
    display: block;
}
main.css:5145
ion-app, ion-nav, ion-tab, ion-tabs, .app-root, .ion-page {
    contain: strict;
}
main.css:5132 …

我想在ionic3中使用加载控制器实现微调器.我已经实现了简单的加载控制器 怎么做？提前致谢.

我当前的装载机

我想要这样的东西

我一直致力于一个项目,以便最近加快Ionic3的所有变化.它主要基于Ionic-Team的演示会议应用程序.

我仍然试图倾斜角度/离子,我让大多数应用程序在ionic2中运行.共享components.module延迟加载搞砸了我一段时间.但现在我在自定义组件中使用Ionic的内置组件时遇到了问题.我正在尝试构建一个使用ion-card的自定义组件来显示通过@Input传递给它的信息.

它给出的错误:

Error: Template parse errors:
'ion-card-header' is not a known element:
1. If 'ion-card-header' is an Angular component, then verify that it is part of this module.
2. If 'ion-card-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<ion-card>

[ERROR ->]<ion-card-header>
    <h3>{{ recipe.title }}</h3>
</ion-card-header>
"): ng:///ComponentsModule/RecipeCardComponent.html@3:2
'ion-card-content' is not a known element:
1. If 'ion-card-content' is an Angular component, then verify that it is part …

我有一个适用于Android的Ionic Cordova应用程序，其中有一个指向Facebook Messenger的按钮：

<a href="https://m.me/my-fb-page" target="_blank"><img src="assets/images/messenger.svg" /></a>

轻按时，屏幕上没有任何内容。我一直通过logcat收到此错误：

CordovaWebViewImpl: Blocked (possibly sub-frame) navigation to non-allowed URL: intent://user/xxxxxxxxxxxxx/?intent_trigger=mme&nav=discover#Intent;scheme=fb-messenger;package=com.facebook.orca;end

我安装了cordova-plugin-whitelist。

config.xml的内容：

    ...
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-navigation href="*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-intent href="fb-messenger:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <allow-intent href="fb-messenger:*" />
        ...

我已经尝试了许多用于允许意图，访问和允许导航的选项。

该问题与Facebook Messenger并不特别相关，我在打开其他外部（支付）应用程序时也遇到了问题