标签: ionic2

我想编写一个小的离子/角度应用程序,我从远程服务器加载一个动态mp3文件并按下按钮播放它或者如果选中它我会自动播放它.我尝试使用简单<audio></audio>但我不确定这是否是这个的好方法...

码:

HTML

<audio id="player">
<source id="source" src="http://remote.address.com/example.mp3"></source>
</audio>

JavaScript的

play(){
var audio= document.getElementById('player');
audio.play();
}

创建基本指令很简单:

import {Component} from 'angular2/core';

@Component({
    selector: 'my-component',
    template: '<div>Hello!</div>'
})
export class MyComponent {
    constructor() {

    }
}

这按预期工作.但是,如果我想在我的指令中使用Ionic组件,事情就会爆炸.

import {Component} from 'angular2/core';

@Component({
    selector: 'my-component',
    template: '<ion-list><ion-item>I am an item</ion-item></ion-list>'
})
export class MyComponent {
    constructor() {

    }
}

该指令被渲染,但是离子组件没有被转换,因此看起来/工作不正常.

我找不到任何关于此的例子.我该怎么做？

我正在使用Ionic 2(2.0.0-beta.10)开展一个项目.我尝试通过请求传递授权令牌.但是没有发送标头.我试图传递的其他标头也没有被发送.

let url = 'http://www.example.com/savedata';
let data = JSON.stringify({ email: 'test@test.com', password: '123456' });

let headers = new Headers();

headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer ' + "tokenContent");

let options = new RequestOptions({ headers: headers });

this.http.post(url, data, options).map(res => res.json()).subscribe(data => {

                console.log("it worked");

}, error => {
                console.log("Oooops!");
});

我的REST API使用以下标头接收此请求:

Host:               www.example.com 
Connection:         keep-alive  
Access-Control-Request-Method:  POST    
Origin:             http://evil.com/    
User-Agent:         Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36   
Access-Control-Request-Headers: authorization, content-type 
Accept:             */* 
Referer:            http://localhost:8100/?restart=794567   
Accept-Encoding: …

我需要将异步变量传递给函数。像这样：

<div class="team" (click)="addToFavorite((match | async)?.id)">

当然，我有一个错误。

解析器错误：动作表达式中不能包含管道。

也许有一种方法可以在JavaScript中转换异步变量？

我知道Ionic 2有一个黑暗的主题(ionic-angular节点模块附带文件css/ionic.dark.css).

如何在我的Ionic应用程序的SASS中导入它？

我已尝试@import ionic-angular/css/ionic.dark.css过两者src/app/app.scss,src/theme/components.scss但输出在视觉上与首发主题相同.

编辑添加我的ionic info:

Cordova CLI: 6.2.0
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS 
Node Version: v6.9.1

我试图显示和隐藏播放和暂停按钮,当点击播放时我需要隐藏暂停按钮,反之亦然.我试过这样的

<ion-content padding>    
    <button ion-button *ngIf="status"  name="play" (click)="itemSelected()" >Play</button> 
    <button ion-button *ngIf="!status" name="square" (click)="stopPlayback()" >stop</button>        
</ion-content>

    import { Component } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';


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

export class LoginPage {

  status: boolean = false;

    constructor(public navCtrl: NavController,
                public alertCtrl: AlertController,
                public navParams: NavParams,) {                  

                }

    ionViewDidLoad() {
        console.log('ionViewDidLoad LoginPage');
    }
 itemSelected(){
      this.status = true
    }
    stopPlayback(){
      console.log("stop");
      this.status = false
    }

}

有人可以帮助我解决这个问题,提前谢谢

如何删除文本输入md下面的默认行.

我已经在下面尝试了所有这些,但"默认"样式仍然保持这一行.

$text-input-md-highlight-color: "transparent";
$text-input-md-highlight-color-invalid : "transparent";
$text-input-md-highlight-color-valid : "transparent";
$text-input-md-background-color : "transparent";
$text-input-md-show-focus-highlight : "transparent";
$text-input-md-show-invalid-highlight: "transparent";
$text-input-md-show-valid-highlight : "transparent";
$text-input-md-show-success-highlight:      false;
$text-input-md-show-error-highlight:        false;
// Input highlight - normal
$text-input-md-highlight-color:             "transparent";

// Input highlight - valid
$text-input-md-hightlight-color-valid:      "transparent";

// Input highlight - invalid
$text-input-md-hightlight-color-invalid:    "transparent";

我在我的应用程序中使用离子标签,我想在标签按钮中使用图片.我想动态地设置这张照片.

在我的情况下,我有一个帐户与不同的用户链接.我想根据所选用户更改我的标签图片.

我有这个 :

我想要这个:

我的标签中的代码:

    <ion-tabs tabsHighlight="false">
      <ion-tab [root]="HomePage" 
               tabsHideOnSubPages="true"
               tabIcon="checkbox"
               tabTitle="A faire"
               tabBadge="5"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="ToComePage"
               tabsHideOnSubPages="true"
               tabIcon="time" tabTitle="A venir"
               tabBadge="0"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="HistoricPage"
               tabsHideOnSubPages="true"
               tabIcon="book"
               tabTitle="Historique">
      </ion-tab>
      <ion-tab [root]="MenuPage"
               tabsHideOnSubPages="true"
//I want to delete this tab Icon and replace it by a picture.
               tabIcon="menu"
               tabTitle="Menu">
      </ion-tab>
    </ion-tabs>

我不知道怎么做,这个想法？

我通过CLI使用Ionic 2.在这个版本中,他们使用NPM SCRIPTS而不是gulp.

   "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
 },

我已阅读有关向配置添加自定义脚本但尚不清楚如何执行此操作.这是我目前的配置......

"config": {
    "ionic_bundler": "webpack",
    "ionic_source_map": "source-map",
    "ionic_source_map_type": "eval"
  },

我需要创建一个名为"replace"的自定义脚本它将使用NPM替换.我怎么能添加这个,这样当我运行离子服务或构建时它会运行？

这是我想要运行的gulp代码.

var gulp = require('gulp');
var replace = require('gulp-string-replace');
var p = require('./package.json');
var version = p.version;
gulp.task('serve:after', ['version']);

console.log('Task init!!!');
gulp.task('version', function() {
  gulp.src(["./www/index.html"])
  .pipe(replace(/VERSION/g, p.version))
    .pipe(gulp.dest('./www/'));
});

我正在使用这个插件:https://github.com/arnesson/cordova-plugin-firebase我在home.html上有一个按钮,它在home.ts中调用test()函数

public test(): void {
    // wrap in the platform.ready && platform.is('cordova')
    this.fcm.getToken()
      .then((token: any) => {
        console.log("token: ", token);
      });
    this.fcm.onTokenRefresh()
      .subscribe((token: any) => {
        console.log("token onTokenRefresh: ", token);
      });
  }

当我在主屏幕时,一切都应该初始化,我应该能够从getToken()函数获取令牌.但是我得到了令牌:在我的console.log中未定义.我没有收到任何错误,日志很干净,即没有关于这个特定插件的错误.

更新1:

import { Firebase } from '@ionic-native/firebase';
  constructor(public navCtrl: NavController
    , public fcm: Firebase) {

更新2: 尝试这样:cordova插件添加https://github.com/arnesson/cordova-plugin-firebase -变量ANDROID_VERSION = 7.1.0 --save但它仍然为空.

private void getToken(final CallbackContext callbackContext) {
    cordova.getThreadPool().execute(new Runnable() {
        public void run() {
            try {
                String token = FirebaseInstanceId.getInstance().getToken();
                System.out.println("token: …