标签: ionic2

在我的标签页之前,我几乎没有其他常规页面,并且"<Back"始终出现在左下角.

到达我的标签页时,我在标题中丢失了"<Back".为什么？

在Ionic2中使用标签时如何取回后退按钮？

情况:

我想在我的Ionic 2应用程序中创建一个非常简单的登录表单.

无论我尝试什么,我都会收到这个错误:

formGroup expects a FormGroup instance. Please pass one in.

代码:

页面组件:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormGroup, Validators, FormBuilder }  from '@angular/forms';

@Component({
  selector: 'login-page',
  templateUrl: 'login-page.html'
})

export class LoginPage {

    loginForm: FormGroup;

    constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {}

    ionViewDidLoad() 
    {
        console.log('Login page loaded');

        this.loginForm = this.formBuilder.group({
            email: ['', Validators.required],
            password: ['', Validators.required],
        });
    }

    submitLogin() 
    {
        console.log('Doing login..');
    }

}

风景:

<ion-header>
  <ion-navbar>
    <ion-title>LoginPage</ion-title> …

我有一个angular2包库(称之为A),我使用npm install从另一个不同的angular2项目(称为B)导入.
来自A的所有服务,组件似乎都可以在B项目上运行,它们可以很好地导入注入和使用.
但是,只有简单的类定义才行.即我有一个类定义如下

export class JustAClass{
    public Title:string;
    constructor(title:string){
        this.Title = title;
    }

    getTitleLong():string{
        return 'Long '+this.Title;
    }
}

并在index.d.ts我导出它.

从'./components/test/just'导出{JustAClass};

在项目BI中可以看到just.d.ts文件如下:

export declare class JustAClass {
    Title: string;
    constructor(title: string);
    getTitleLong(): any;
}

我使用webswtorm,当我在项目B的文件中使用这个类时,它给了我intellisence并知道指向我文件定义:

import { JustAClass } from 'my-project-lib-A';

@Component({
    templateUrl: 'orders.html'
})
export class SomePage {
    

    constructor() {

        var d = new JustAClass('aaaa'); // this is undefiend in run time
        console.log(d.getTitleLong());

    }

我得到它'JustAClass'未定义,webpack抛出一个错误:

WEBPACK_IMPORTED_MODULE_2_my-project-lib- A.JustAClass不是构造函数

如果重要的话,我将使用ionic2作为项目B.

我不能建立我的离子2应用程序.更改文件后服务工作.

在离子服务上,我收到以下错误消息:

[07:36:10]  ionic-app-scripts 1.0.0 
[07:36:10]  watch started ... 
[07:36:10]  build dev started ... 
[07:36:10]  clean started ... 
[07:36:10]  clean finished in 1 ms 
[07:36:10]  copy started ... 
[07:36:10]  transpile started ... 
[07:36:15]  build dev failed: Maximum call stack size exceeded 
[07:36:15]  dev server running: http://localhost:8100/ 

然后,当我更改*.ts文件时,应用程序已构建并可以使用

[07:37:32]  build started ... 
[07:37:32]  transpile started ... 
[07:37:39]  build finished in 6.81 s 

当我运行ionic build时,会显示以下错误消息:

[07:40:40]  transpile started ... 
[07:40:44]  build dev failed: Maximum call stack size exceeded 
[07:40:44]  ionic-app-script task: "build" …

我有两个问题ion-buttons.

1. 离子文档仅显示ion-buttons元素的用法,除了您可以从示例中推断出的内容之外,没有真正的解释.

2. 什么让我失望的是,在我看来,关键标签是在错误的地方.

当我在文档上看到这个时,我想知道这是不是一个错误,但我也在堆栈的代码示例中看到了这一点.像这个:

<ion-header>
  <ion-navbar primary>
    <ion-buttons start>       **// here it starts.**
      <button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>  **//Why does ion-buttons close here?** 

    <ion-title>
      My Page
    </ion-title>

    <ion-buttons end> **// END here?** 
      <button  ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons> **// then close AGAIN here when there is no companion open tag?**
  </ion-navbar>
</ion-header>

题:

我如何@ VIMEO /播放器在我的Angular2 /打字稿项目(特别是Ionic2)工作？

描述:

试图让vimeo 播放器使用Angular2/Typescript.

npm install --save @vimeo/player

根据他们的文档,库可以像这样使用:

如果您正在使用webpack或汇总等模块捆绑器,则导出的对象将是Player构造函数(与它附加到window.Vimeo的浏览器不同):

import Player from '@vimeo/player';

const player = new Player('handstick', {
    id: 19231868,
    width: 640
});

player.on('play', function() {
    console.log('played the video!');
});

哪个看起来很有前途!但是不起作用.

我尝试过的:

我安装了@vimeo/player,@types/vimeo__player 我在Ionic2应用程序中创建了一个播放器组件.

player.ts:

import {Component, ViewChild} from '@angular/core';
import {NavController} from "ionic-angular/index";

//noinspection TypeScriptCheckImport,TypeScriptCheckImport
import Player from "@vimeo/player";


@Component({
  selector: 'player-component',
  templateUrl: 'player.html'
})
export class PlayerComponent {

  @ViewChild('player_container') playerContainer;
  private player: Player;

  constructor(public navCtrl: NavController){} …

我已经看过像rxjs这样的教程.

我的问题是:
1)take(1)这里的用法是什么？我在网上看到了很多解释,但我并没有真正理解.此外,我认为take(1)在此代码中使用没有任何好处.并且作者take(1)在REST api相关服务中使用每个返回函数.

2)作者在订阅后没有取消订阅.是因为作者使用take(1)因此不需要手动取消订阅？

3)如果我想实现catch功能怎么办？我应该在服用前或服用后实施.

getProfile() { // this is a call to REST API
    return this.service.getProfile()
            .map(res => res.json())
            .take(1)
    }
}

this.data.getProfile().subscribe(profile => {
    this.userProfile = profile;
});

不知道为什么总是为我显示这个错误,但ionic3项目可以像往常一样运行.

这是显示:

我正在努力ionInfiniteScroll工作 - 我已经让它在我的应用程序中的其他几个地方工作,而且这个页面实际上几乎与另一个工作正常的页面相同.当我向下滚动时没有任何反应,没有加载图形.我的doInfinite方法内部有一个控制台消息,它永远不会执行...所以doInfinite代码永远不会执行.我想也许html结构有问题,因为该方法没有执行:

<ion-content no-padding>
  <div (swipeLeft)="swipeLeft()" (swipeRight)="toFull()"> <!--(swipeRight)="toProfile()"-->

    ...

   <div class ='weeklydeals contentone' #weeklydeals [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item *ngFor="let a of promotions" no-padding>
      <div class="feedtoptextcontainer">
        <!--<div class="imageparent">
          <img class="postprofilepic" src="{{a.url}}">
        </div>-->
        <div class="usernamecontainer">
          <h4 class="postusername">@{{a.username}}</h4><br>
        </div>
        <h3 class="promotitle">{{a.title}}</h3>
        <div class="desccontainer">
          <h4 class="deal">{{a.caption}}</h4>
        </div>
      </div>
      <!--<img class="imagepost" src="{{i}}">-->
     </ion-item>
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
   </ion-infinite-scroll>
  </div>

  ...

  <ion-item class="noavail" #noavail no-padding no-lines>NO RESULTS</ion-item>
</div>

doInfinite方法代码:

doInfinite(infiniteScroll) {
    console.log("in doinfinite promotionsssssss");
    setTimeout(() …

在我的代码中，我得到了错误，因为Property 'cordova' does not exist on type 'Window'. 这是我得到错误的地方 var browserRef = window.cordova.InAppBrowser.open()

我还安装了，typings但仍然出现此错误。我该如何解决？