标签: ionic3

我看到Ionic 2有一个响应式网格系统,但这似乎只是让你创建一个网格样式布局.

我正在寻找能让我在平板电脑上以一种方式显示视图而在手机上以另一种方式显示视图的内容.在这个特定的例子中,我有一份工作清单.如果它是平板电脑,我还想在列表右侧显示一张地图并将其绘制出来.如何制作我理解的地图,但我如何告诉他们使用的是什么并显示正确的用户界面？

我有一个全新的应用程序使用ng-cli创建这个非常简单的代码^^

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private my: string) {}
} 

而且我已进入控制台了

EXCEPTION:没有String的提供者!

我没有在代码中看到任何错误,所以有什么不对!

在ng-book中,我可以阅读

export class Article { 
  title: string; 
  link: string; 
  votes: number;
  constructor(title: string, link: string, votes?: number) { 
    this.title = title;
    this.link = link;
    this.votes = votes || 0;
  }
}

看一眼

https://github.com/Microsoft/TypeScriptSamples/blob/master/greeter/greeter.ts

如何设置可在所有视图中访问的全局函数？

在app.component.ts中我添加了一个简单的方法

  openShare() {console.log("button clicked")} 

然后在我的导航中我有

  <button ion-button right (click)="openShare()">
  <ion-icon name="md-share"></ion-icon>
</button>

当我尝试从任何页面访问它时,我得到以下内容.

self.context.openShare is not a function

但是,如果我将它直接放在构造函数中(例如this.openShare();),它确实执行正常,但是当使用(单击)函数从任何页面调用时它只是不起作用.

app.component.ts不是全局的吗？我认为这是我放置的地方,但也许我错过了一些东西.

基本上它是导航器上一个简单按钮的功能,我需要它是全局的,因为它在每个页面上使用.

任何帮助将不胜感激,仍然可以计算Ionic 2.

我正在尝试使用延迟加载创建一个离子3选项卡应用程序,而无需导入组件.

在我的app.component.ts中

 rootPage:string = "Tabs";

在tabs.html中

<ion-tabs>
<ion-tab [root]="Favorites" tabTitle="fav" tabIcon="star"></ion-tab>
<ion-tab [root]="libaray" tabTitle="Library" tabIcon="book"></ion-tab>
</ion-tabs>

在Favorites.module.ts中

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Favorites } from './favorites';

@NgModule({
  declarations: [
    Favorites,
  ],
  imports: [
    IonicPageModule.forChild(Favorites),
  ],
  exports: [
    Favorites
  ]
})
export class FavoritesModule {}

到目前为止,标签页成功加载但没有视图(空白页).我认为我使用[root]属性与延迟加载的问题!怎么解决这个问题？

谢谢

我正在使用Ionic 3.*,创建一个只包含一个按钮的组件.

组件代码是:

@Component({
  selector: 'profile-button',
  templateUrl: 'profile-button.html',
})
export class ProfileButtonComponent {
  constructor(
    private popoverCtrl: PopoverController
  ) {}

  /**
   * Present the Profile popover
   * @param ev
   * @returns {Promise<any>}
   */
  async presentPopover(ev) {
    let popover = this.popoverCtrl.create(ProfilePopover);

    return popover.present({
      ev
    });
  }
}

我的模板是:

<button ion-button icon-only (click)="presentPopover($event)" title="Profile">
    <ion-icon name="person"></ion-icon>
</button>

问题:

问题是该icon-only指令只是被忽略了.按钮仍然具有背景颜色.如果我将模板放在组件外部,它会显示正确的样式.

看起来这些指令在Component内部不可用.我的组件位于自定义模块中,而不是在AppModule上.

我怎么解决这个问题？发现在Ionic2上我需要手动导入指令,但它不适用于Ionic3.

我正在使用此文件选择器将文件上传到我的服务器:

https://github.com/jcesarmobile/FilePicker-Phonegap-iOS-Plugin

我的服务器需要base64文件,所以我需要转换我上传的文件.我正在使用离子文档中提到的文件插件.所以我的代码看起来像这样:

uploadIOS(){
    var self=this

    let utis = ["public.data"]

    FilePicker.pickFile(
        function (uri) {
            let correctPath = uri.substr(0, uri.lastIndexOf('/') + 1);
            let currentName = uri.substring(uri.lastIndexOf('/') + 1);

            self.file.readAsDataURL(correctPath, currentName).then(result=>{
                    console.log ('reading data ' + JSON.stringify(result))
                }).catch((err)=>{
                    console.log ('err4' + JSON.stringify(err))
                })
        },
        function (error) {
            console.log(JSON.stringify(error));
        },
        function (utis) {
            console.log('UTIS', this.utis)
        }
    )
}

但是当我从Google云端硬盘或iCloud Drive或DropBox上传时,它会返回

{ "代码":5 "消息": "ENCODING_ERR"}

我有一个像下面这样的异步方法.它[ts] 'await' expression is only allowed within an async function.在这里显示错误await userProfile.set({.你能告诉我怎么解决它吗？

注意:也许是因为我试图在promise里面打电话observable.任何线索？

 async loginWithGoogle(): Promise<void> {
    const result = await this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
    const userId: string = result.uid;
    const userProfile: AngularFirestoreDocument<UserProfile> = this.fireStore.doc(`userProfile/${userId}`);
    const userProfiles: AngularFirestoreCollection<UserProfile> = this.fireStore.collection('userProfile/', ref => ref.where('email', '==', result.email));
    const userProfiles$: Observable<UserProfile[]> = userProfiles.valueChanges();
    userProfiles$.subscribe(res => {
      if (res == null) {
        await userProfile.set({ //here it shows error
          id: userId,
          email: result.email,
          creationTime: moment().format(),
          lastSignInTime: moment().format()
        });
      } …

这就是我所拥有的并且它正在工作,它与progress方法有关并且它正确显示:

<div [ngStyle]="{'width.%': progress()}"></div>

现在我必须动态创建元素:

let myDiv = <HTMLElement>(document.createElement('div'));

但我似乎无法找到一种方法将progress方法绑定到我动态创建的元素.

使用@fatemefazli建议的渲染器代码,它没有变化检测,因此当数据可用时它不会呈现,也不会监听进度变化方法:https://stackblitz.com/edit/angular-fpyfmn

动态创建DOM元素的决定来自于使用HammerJS附加平移手势的需要,这需要像这样附加一个监听器:

addGestures(elem){
    var hammer = new Gesture(elem);
    hammer.listen();

    hammer.on('pan', (e) => this.Pan(e));
  }

我试图创建一个事件发布/发射器,但我没有触发器来发布它.

我正在尝试显示某个类别中的所有项目.我有一个slug或类别的关键字,我可以使用它来识别父类别,我得到父类别并使用它来搜索具有相似父类的所有类别.我有两个与分页相关的错误,错误是相关的.

网址ads_url: https://jokerleb.com/wp-json/wp/v2/ads?per_page=100&&page=.例如page=1

服务

  getAds(page): Observable<any[]> {
    return this.http.get(this.api_url + page)
      .flatMap((ads: any[]) => {
        if (ads.length > 0) {
          return Observable.forkJoin(
            ads.map((ad: any) => {
              return this.http.get(this.ads_thumb_url + ad.id)
                .map((res: any) => {
                  let media: any = res;
                  ad.media = media;
                  return ad;
                });
            })
          );
        }
        return Observable.of([]);
      });
  }

TS

  constructor(public navCtrl: NavController, public navParams: NavParams, public renderer: Renderer, public zone: NgZone, public adsProvider: AdsProvider) {

    this.category = this.navParams.get('category');

    this.loadAds();
  }
  loadAds(infiniteScroll?) {
    this.adsProvider.getAds(this.page).subscribe((data: …

当离子2还处于测试阶段时,我已经开始研究视频会议混合应用了.我在离子1中开发了它,并进行了一些调整以使其工作.现在使用离子3和角4,我正在努力为我的离子应用程序找到官方支持的WebRTC cordova插件.有没有人知道插件是否会很快获得官方支持？如果没有,最好的选择是什么？多谢你们!