标签: ionic3

我使用Ionic2框架在Angular2中使用Injectable Service时遇到问题.

我的服务如下:

import {Injectable} from '@angular/core';
import {NavController} from 'ionic-angular';

@Injectable()
export class ViewStackController {
  static get parameters() {
    return [[NavController]];
  }

  constructor(nav) {
  }
}

我得到错误No provider for NavController.这很奇怪,因为在任何Page类中它都有效,尽管它有@Component,但也许这就是问题所在.

编辑#1:

我正在提供这项服务ionicBootstrap,如下所示:

ionicBootstrap(MyApp, [ViewStackController], {});

我正在尝试使用延迟加载创建一个离子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]属性与延迟加载的问题!怎么解决这个问题？

谢谢

我想发布我的应用程序作为PWA,所以我做的是

将此脚本插入index.html

<!--script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    }
</script-->

然后安装

npm run ionic:build --prod 

看起来它部署它但我的问题是:

1. 我需要将哪些文件上传到主机以将应用程序发布为PWA？

2. 为什么当我在应用程序中更改某些内容并运行离子服务时没有任何更改,它只在WWW文件夹的index.html中更改？为什么？(因为现在是PWA？)

3. 当我打开www文件夹并运行打开index.html时,我按下打开警告对话框的按钮它不会打开它.为什么？

4. 当我运行命令？只是在发展的最后？

我正在使用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.

当用户点击my profile页面(或标签)时,用户没有登录,然后显示login page如下所示.login page它在哪里header back button,它工作正常(你可以看到下面的代码).我需要相同的功能当用户击中了hardware back button on Android device.但它关闭了应用程序.你能告诉我如何解决这个问题吗？如果您需要更多信息,请告诉我.

我-profile.ts

constructor(public navCtrl: NavController, public app: App, public userService: UserService
        ) {
        if (!this.userService.userDetails) {
            this.app.getRootNav().setRoot('Login', { profile: true });
            return;
        }
    }

login.ts

constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.profile = this.navParams.data.profile;
    }

    back() {
        if (this.profile) {//not logged in user
            this.navCtrl.setRoot('TabsPage');
        }
    }

的login.html

<ion-header>
  <ion-navbar>
    <ion-buttons left>
      <button ion-button *ngIf="profile" (click)="back()" tappable><ion-icon name="arrow-back"></ion-icon></button>
    </ion-buttons>
    <ion-title>login</ion-title> …

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

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"}

如何从IONIC 3中的图库中拍摄图像？

我无法从图库中使用图像

https://ionicframework.com/docs/native/camera/

https://ionicframework.com/docs/native/camera-preview/

我目前正在开发一个Ionic 3应用程序,我需要在Android设备上获取手机的蓝牙MAC地址(或能识别蓝牙网络内设备的东西),我一直在尝试获取MAC地址(或UUID等). )使用UidIonic 的本机插件,以及本机插件AndroidPermissions.我目前正在使用插件主页上建议的方法https://ionicframework.com/docs/native/uid/

这是获取设备MAC地址的代码:

async getMAC() {
   const { hasPermission } = await this.androidPermissions.checkPermission(
     this.androidPermissions.PERMISSION.READ_PHONE_STATE
   );

   if (!hasPermission) {
     const result = await this.androidPermissions.requestPermission(
       this.androidPermissions.PERMISSION.READ_PHONE_STATE
     );

     if (!result.hasPermission) {
       throw new Error('Permissions required');
     }

     return;
   }

    return this.uidNative.MAC;
  }

我还READ_PHONE_STATE向我添加了权限,AndroidManifest.xml并为Ionic设置了相应的提供程序.我的手机正常请求许可.

我的问题

在请求许可后,上述Promise成功解决,但它返回null,我无法弄清楚为什么会发生这种情况

1. 这有什么解决方法吗？有没有人有类似的问题？
2. 有没有另一种方法来获取Android设备的MAC地址并将其传递给Ionic应用程序？

提前致谢

这就是我所拥有的并且它正在工作,它与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: …