标签: ionic3

我从cli创建了离子项目.离子版本是3.我试图在中心制作标题图像.有人请帮帮我

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar color='primary'>
      <ion-title>
        <img src="assets/imgs/logo.png" width="128" />
      </ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

最初我的app.component.ts文件被加载然后我有两个变量,name并email从API获取调用更新,为了进行此api调用我需要用户名如果​​我没有用户名我将无法更新此名称和电子邮件.

一旦我获得了用户名,我就可以拨打api电话,但我的用户名只有在登录成功后才可用.

我的app.html有这个,下面的代码是我的sidemenu的一部分

<ion-item class="profile-info">
  <ion-icon name="person" item-left></ion-icon>
  <h2>{{name}}</h2>
  <p class="se-email">{{email}}</p>
</ion-item>

我的app.component.ts文件有这个

name 
 email

 if(localStorage.getItem("username")){
   //here it is invoking 2nd time because i have stored the username after login so no problem
    this.getUserDetails();//this function call the same api 
  }else{
    //at first thime i am not able update the name and email because i dont have username 
    //so i am trying to update the name with set and get method where it will return my data …

当要添加一个特定的类时，我想触发离子-项目-滑动元素。就我而言，是“主动滑梯”。我试图用ViewChild引用该元素，但总是出现错误

TypeError: Cannot read property 'classList' of undefined

当clickHandler方法被调用时。

<ion-list>
  <ion-item-sliding #slideItem>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options side="left">
      <button ion-button (click)="favorite(item)">Favorite</button>
      <button ion-button color="danger" (click)="share(item)">Share</button>
    </ion-item-options>

    <ion-item-options side="right">
      <button ion-button (click)="unread(item)">Unread</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

的HTML

export class TestPage { 

  @ViewChild('slideItem') slideItem : ElementRef;

  constructor() {}

  // ...

  @HostListener('click', ['$event'])
  clickHandler(event) {
    console.log("Test 1"); // gets called  

    if(this.slideItem.nativeElement.classList.contains('active-slide'))  {
      console.log("Test 2");  
    }
  }
}

我正在使用离子版3.9.2

我想要实现的是我想将离子应用程序的所有默认字体更改为我给定的自定义字体.

谷歌搜索后,我明白我必须设置app.scss文件夹中存在的字体外观app

这是我使用的代码:

@import url('https://fonts.googleapis.com/css?family=Raleway');
$font-family-base: "Raleway", sans-serif !default;

然而,即使这样做后,我无法更改整个应用程序的字体,因为它没有反映在应用程序中.

我需要使用CSS中心和裁剪图像.我已经按照这篇文章.但设备UI输出有些不同.你能解释一下这种行为吗？

这是用例:

我们不想实际裁剪 - 只显示图像的中间部分.人们上传的一些文档将是文档,所以不要让它被拉伸.

我的问题是我不知道为什么它转换(1图像)landscape模式,即使我使用portrait模式获得图像？任何解释？

photo {
    .photo {
        position: relative;
        width: 100%;
        height: 200px;
        overflow: hidden;
        img {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 100%;
            width: auto;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        img.portrait {
            width: 100%;
            height: auto;
          }
    }
}

<div class="photo">
  <img [src]="data?.url class="portrait">
</div>

用户界面:

1- 它显示我在portrait模式下使用设备的时间

2- 当我在landscape模式中使用设备时

运行时代码:

我正在使用Angular 5.0.3.当我创建一个promise并尝试订阅它时会发生错误.当我尝试执行我的代码时,我在上传的图像中收到以下错误..我尝试了解决这个错误的所有可能性,但不幸的是我无法解决它.

精英api.ts

import { Injectable } from '@angular/core';
import { Http,Response } from '@angular/http';

//import { HttpClient } from "@angular/common/http";

//import 'rxjs';
//import 'rxjs/add/operator/map'
import { map } from 'rxjs/operators';
//import 'rxjs/add/operator/catch';

import { Observable } from 'rsjs/Observable';

@Injectable()
export class EliteApi{

    private baseUrl = 'https://elite-schedule-c1e63.firebaseio.com//';

    currentTourney:any = {};

    constructor(private http: Http){}

    getTournaments(){
        return new Promise(resolve => {
            this.http.get(`${this.baseUrl}/tournaments.json`) 
                .subscribe((res: Response) => resolve(res.json()));
        });

        }


    getTournamentData(tourneyId) : Observable<any>{
        return this.http.get('${this.baseUrl}/tournaments-data/${tourneyId}.json')
            .map((res: Response) => {
                this.currentTourney = res.json();
                return …

使用ionic3的本机存储时出现错误。它无法正确读取本机存储中的数据。错误代码：2，但没有详细描述。

  public async getToken(): Promise<AccessToken> {
    let token = null;
    let expires = null;
    try{
      token = await this.storage.getItem(this.ACCESSTOKEN_KEY);
      expires = await this.storage.getItem(this.ACCESSTOKEN_EXPIRES_KEY);
    }catch(e){
      alert(JSON.stringify(e));
    }
    if (token == null || expires == null || expires < new Date()) {
      token = null;
    }
    return token;
  }

错误截图

我有3条路线.当我从第一个移动到第二个时,我需要传递一个参数: this.navCtrl.push(ReadyPage, { newGame: true });

但是当我从第3个移动到第2个时,我也需要通过这个参数.

我正在尝试这个但不起作用: this.viewCtrl.dismiss({ newGame: true });

比较这两种方法dismiss似乎并没有这样的选择(除非它被称为data代替params): abstract push(page: Page | string, params?: any, opts?: NavOptions, done?: TransitionDoneFn): Promise<any>; dismiss(data?: any, role?: string, navOptions?: NavOptions): Promise<any>;

我正在使用角4和离子3.现在当我运行"离子cordova运行android"它给我以下错误:

 "more than one library with package name 'com.google.android.gms.license'"

我的project.property文件:

target=android-26

   android.library.reference.1=CordovaLib   
   cordova.system.library.1=com.android.support:support-v4:27.1.0    
   cordova.system.library.2=com.android.support:support-v4:27.1.0    
   cordova.system.library.3=com.android.support:support-v4:27.1.0    
   cordova.system.library.4=com.android.support:appcompat-v7:25.+    
   cordova.gradle.include.1=cordova-plugin-firebase/starter-build.gradle    
   cordova.system.library.5=com.google.gms:google-services:+    
   cordova.system.library.6=com.google.android.gms:play-services-tagmanager:+    
   cordova.system.library.7=com.google.firebase:firebase-core:+    
   cordova.system.library.8=com.google.firebase:firebase-messaging:+    
   cordova.system.library.9=com.google.firebase:firebase-crash:+    
   cordova.system.library.10=com.google.firebase:firebase-config:+

我在build.gradle文件中的依赖项:

dependencies {
 compile fileTree(dir: 'libs', include: '*.jar')
 // SUB-PROJECT DEPENDENCIES START
 debugCompile(project(path: "CordovaLib", configuration: "debug"))
 releaseCompile(project(path: "CordovaLib", configuration: "release"))
 compile "com.android.support:support-v4:27.1.0"
 compile "com.android.support:appcompat-v7:25.+"
 compile "com.google.gms:google-services:+"
 compile "com.google.android.gms:play-services-tagmanager:+"
 compile "com.google.firebase:firebase-core:+"
 compile "com.google.firebase:firebase-messaging:+"
 compile "com.google.firebase:firebase-crash:+"
 compile "com.google.firebase:firebase-config:+"
 // SUB-PROJECT DEPENDENCIES END
         }

提前致谢 :)

我正在尝试使用xcode模拟器，但在启动时始终出现此错误：

Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[<WKWebViewConfiguration 0x7f9dce800d40> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key _requiresUserActionForMediaPlayback.'

我尝试卸载/重新安装cordova-plugin-ionic-webview，并用尽了在SO上可以找到的所有解决方案，但它们没有任何区别。

这是一个离子科尔多瓦项目，因此我无法更改xcode中的任何代码，因为下次我构建该项目时，它将被覆盖。任何其他解决方案将不胜感激。

我不确定是否相关，但是当我在命令行上执行android ionic仿真时，它可以工作，但是ios emulation没有，并且出现此错误：

/Users/path-to-project/platforms/ios/build/emulator/project.app/Info.plist file not found.

问题是在ios之下没有创建任何构建文件夹，这可能就是为什么它无法在其中找到任何内容的原因。我想我已经将问题跟踪到了输出结果上方的以下消息中：

CONFIGURATION_BUILD_DIR = /Users/path-to-project/platforms/ios/build/emulator
SHARED_PRECOMPS_DIR = /Users/path-to-project/platforms/ios/build/sharedpch

但是，我不知道这些配置在哪里设置。谁知道ionic从哪里获得这些配置的？

但是，一个问题浮现在脑海：如果CONFIGURATION_BUILD_DIR设置为此位置，为什么不在此处创建构建目录？