标签: ionic2

将水平滚动条添加到Ionic2的离子滑轨

我正在使用Ionic2 ion-slides,它对我来说很好.

    <ion-slides [options]="extraOptions">
        <ion-slide *ngFor="let slide of slides">
            <img src="{{slide.image}}" />
        </ion-slide>
    </ion-slides>
Run Code Online (Sandbox Code Playgroud)

我想补充一个水平滚动条如下所示的组队,探索API中http://idangero.us/swiper/api/#.V6Lcx8twbqA(例13)作为文档提到组队,探索什么是用于ion-slides.在该示例的源代码具有 <div class="swiper-scrollbar"></div>的后<div class="swiper-wrapper">标签.

问题是Ionic会生成HTML,所以如何添加滚动条功能.

要向滑块添加分页项目符号,我只需pager在ion-slides标记中添加属性指令.是否有类似的horizental滚动条?

swiper ionic2 angular

6
推荐指数
1
解决办法
730
查看次数

将数据从子组件传递到父组件

我的角度有问题,这里有两个组成部分:

  • MyApp(ParentComponent)
  • LoginPage(ChildComponent)

我有UserNow部分属性,MyApp我想UserNow通过组件设置属性的值LoginPage.怎么做?

我试过了(但没有给任何影响)

Import {MyApp} from '../../app/app.component'; 

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
    public app: any;

    login() {
        ...
        this.app = MyApp;
        this.app.userNow = MyValue;
        ...
    }
}
Run Code Online (Sandbox Code Playgroud)

ionic2 angular-components angular

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

Ionic 2 - 如何导入Intl polyfill

我是Ionic2/Angular2的新手,我一直在环顾四周,找到了几个解决方案,解决了使用国际日期格式来解决polyfill问题需要做的事情(这里的示例答案:Ionic 2,使用Angular 2 Pipe break iOS-"找不到变量:Intl")

但我不明白的是什么没有教程/堆栈溢出的解释帮助我弄清楚,究竟是什么以及如何完成这一点.我做了npm install以将intl包添加到我的节点模块中,但是所有内容只是说"然后导入它"但我不知道该怎么做,因为我没有polyfill.ts文件我可以将其导入,只有build/polyfill.js文件,我尝试直接导入.ts文件,该文件使用intl日期操作,但是没有解决问题.

我可能不理解一些非常基本的东西,这就是为什么没有人明确说明你需要导入它的原因,但是有人可以向我解释如何导入它或者引用我的资源来解释我不是理解.

import polyfills ionic2 angular

6
推荐指数
1
解决办法
4366
查看次数

如何在ionic2中的离子切换上自定义文本

我正在寻找自定义离子切换,以显示自定义文本.我需要它说是/否.尝试寻找解决方案,发现我们可以使用离子切换文本.但是这种解决方案似乎不适用于ionic2.以下是我正在使用的代码段.尝试使用ng-true-value但是也没有用.

<ion-toggle ion-toggle-text="Yes;No" ng-true-value="Yes" ng-false-value="No">
</ion-toggle>
Run Code Online (Sandbox Code Playgroud)

我在离子文档中找不到任何与此相关的离子切换.你能告诉我如何实现这个功能吗?

ion-toggle ionic2

6
推荐指数
1
解决办法
959
查看次数

类型'HTMLElement'上不存在属性'toDataURL'

嗨,我是TypeScript的新手.我正在尝试使用JSBarcode在canvas中生成条形码,并将其作为图像使用添加到JSpdf addImage.但我得到了上述错误.

barcode.html

这是我的HTML代码.通过单击生成按钮,它已创建条形码.但是当我将我的html转换为PDF时,它会出现上述错误.

<canvas id="barcode"></canvas>
<a id="download"  download="barcode.png" (click)='Generate();'>Generate</a>
<button (click)='Generatepdf();'>PDF</button>
Run Code Online (Sandbox Code Playgroud)

barcode.ts

private Generate(): void {
    JsBarcode("#barcode", "12345", {
            width: 2,
            height: 25
        });
    }

Generatepdf() 
{
     var pdf = new jsPDF('p', 'pt', 'letter');
     let canvas =document.getElementById('barcode');
     console.log(canvas);
     let dataURL = canvas.toDataURL("image/jpeg");
     pdf.addImage(dataURL, 'JPEG', 15, 40, 180, 160);
     function (dispose) {
        pdf.output('datauri');
     }, margins);
}
Run Code Online (Sandbox Code Playgroud)

typescript ionic2 angular

6
推荐指数
1
解决办法
4893
查看次数

升级Firebase期间的UpdateProfile()

我正在开发一个应用程序,我想实现这一目标。当用户登录时,我想获取其用户名并存储在firebase中。所以我创建了这个:

Signup(email: string, password: string, displayName: string) {
    this.angFire.auth.createUser({
      email: email,
      password: password
    }).catch(
      (err) => {
        console.log(err);
        this.error = err;
      })
...
Run Code Online (Sandbox Code Playgroud)

并且这可行,现在我还需要将displayName保存到当前用户中,因此我尝试在同一函数(Singup())中执行此操作:

let user = firebase.auth().currentUser;
    user.updateProfile({
      displayName: this.displayName,
      photoURL: "https://example.com/jane-q-user/profile.jpg"
    }).then(function() {
      console.log("Nome utente inserito");
    }, function(error) {
      console.log("Errore durante inserimento utente");
    });
Run Code Online (Sandbox Code Playgroud)

但这给了我这个:

error_handler.js:54 EXCEPTION: Error in ./SignupPage class SignupPage - inline template:70:4 caused by: Cannot read property 'updateProfile' of null
Run Code Online (Sandbox Code Playgroud)

怎么做?我在ionic 2 angular2,firebase / angulrfire上运行

文档参考:

更新用户资料

您可以使用updateProfile方法更新用户的基本个人资料信息(用户的显示名称和个人资料照片URL)。例如:

var user = firebase.auth()。currentUser;

user.updateProfile({显示名: “简问用户”,photoURL: “ …

firebase angularfire firebase-authentication ionic2 angular

6
推荐指数
1
解决办法
754
查看次数

registerBackButtonAction,Ionic2,用于不同的页面

我正在开发一个Ionic2应用程序.我对registerBackButtonAction功能感到困惑.

我在一个页面上做了这个(比如pageA).它按预期工作.

this.platform.registerBackButtonAction(() => {
     console.log("back presed");
    this.abortDownloadAndExit();
    });
Run Code Online (Sandbox Code Playgroud)

现在我想registerBackButtonAction在其他页面上做一些其他操作(比如PageB).但Ionic正在从pageA采取行动

如何在不同页面上注册不同的作品.

typescript ionic-framework ionic2 ionic3 angular

6
推荐指数
1
解决办法
5797
查看次数

离子2:设定间隔

我尝试在.ts文件中设置一个间隔,但我不明白如何在间隔中的同一文件中使用一个函数.

解释 :

我的间隔设置:

this.task = setInterval(function () {
            this.refreshData();
        }, 300);
Run Code Online (Sandbox Code Playgroud)

我的功能在同一个ts文件中:

refreshData() : void{
        console.log('update...');
    }
Run Code Online (Sandbox Code Playgroud)

当我在我的设备上运行时,我有这个错误:

04-19 10:38:57.535 21374-21374/com.ionicframework.app722890 I/chromium: [INFO:CONSOLE(79432)] "TypeError: this.refreshData is not a function
                                                                                      at file:///android_asset/www/build/main.js:10987:18
                                                                                      at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:10284)
                                                                                      at Object.onInvokeTask (file:///android_asset/www/build/main.js:39626:37)
                                                                                      at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:10220)
                                                                                      at e.runTask (file:///android_asset/www/build/polyfills.js:3:7637)
                                                                                      at invoke (file:///android_asset/www/build/polyfills.js:3:11397)
                                                                                      at e.args.(anonymous function) (file:///android_asset/www/build/polyfills.js:2:30193)", source: file:///android_asset/www/build/main.js (79432)
Run Code Online (Sandbox Code Playgroud)

我尝试这种方式,但我不工作:

this.task = setInterval(this.refreshData(), 300);
Run Code Online (Sandbox Code Playgroud)

这只调用我的函数一次.

有人有想法吗?

javascript typescript ionic2 ionic3 angular

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

Ionic 2 Facebook评论小工具facebook评论视图未显示

我在我的离子应用程序中使用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>
Run Code Online (Sandbox Code Playgroud)

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

<div class="fb-comments" data-mobile="true" data-width="100%" page-href="https://facebook.com/" data-numposts="15"></div>
Run Code Online (Sandbox Code Playgroud)

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

cordova hybrid-mobile-app ionic2 angular2-directives

6
推荐指数
0
解决办法
440
查看次数

ionic/angular-如何正确使用接口?

我对角度/离子应用程序开发很新.我在某处读了以下内容

接口仅在编译时.这样只允许您检查收到的预期数据是否遵循特定结构.

我正在创建一个离子应用程序,API服务会将一些数据返回给用户.假设它是一个登录函数,API服务返回该数据.

我在Ionic中创建了一个提供程序,使用HTTPClient从API调用API.

//Provider

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

interface LoginResponse {
  success: boolean;
  message: string;
  token: string;
  userId: number;
}
@Injectable()
export class LoginServicesProvider {
  constructor(public http: HttpClient) {
  }

  login(reqData): Observable<LoginResponse[]> {
    return this.http.post<LoginResponse[]>('localhost:3000/api/login', reqData);
  }
}
Run Code Online (Sandbox Code Playgroud)

如您所见,我创建了一个名为LoginResponse的接口

Login组件的代码如下:

//Component

import { LoginServicesProvider } from './../../providers/login-services/login-services';
import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-login-page',
  templateUrl: 'login-page.html',
}) …
Run Code Online (Sandbox Code Playgroud)

typescript ionic-framework ionic2 angular

6
推荐指数
2
解决办法
7505
查看次数