标签: ionic4

我第一次使用离子4的beta.我尝试在登录页面上禁用菜单,但是我遇到了一些麻烦.

我用ionic-cli和sidemenu模板创建了应用程序,然后生成了一个登录页面.

我<ion-split-pane>从app.component.html中删除了它

我修改了app-routing.module.ts以重定向到我的登录屏幕.在我的登录文件中,我尝试放置一个ngOnInit事件来禁用此特定页面上的菜单

import { Component, OnInit, AfterContentInit, AfterViewInit,OnDestroy } from '@angular/core';
import { MenuController } from '@ionic/angular';
@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit, AfterContentInit, AfterViewInit,OnDestroy {
  constructor(public menuCtrl: MenuController) {}
  ngOnInit() {
    this.menuCtrl.enable(false);
    this.menuCtrl.swipeEnable(false);
  }
  ngAfterContentInit()  {
    this.menuCtrl.enable(false);
    this.menuCtrl.swipeEnable(false);
  }
  ngAfterViewInit() {
    this.menuCtrl.enable(false);
    this.menuCtrl.swipeEnable(false);
  }
  ngOnDestroy() {
    this.menuCtrl.enable(true);
    this.menuCtrl.swipeEnable(true);
  }
}

我尝试在离子菜单中设置了id

<ion-menu swipeEnabled="true" #menu>

并改变我的代码

this.menuCtrl.enable(false, 'menu');

它不起作用,有人可以帮助我.

谢谢

带有ionic 4的iOS设备上的Livereload（离子Cordova运行ios -l）似乎不起作用。它停留在初始屏幕的初始加载中。我已经尝试了离子项目开始空白后马上进行新项目，但仍然无法正常工作。

浏览器上的livereload（离子服务）和模拟器（离子cordova模拟ios -l）工作正常。

离子信息：

Ionic:

   ionic (Ionic CLI)  : 4.0.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : ios 4.5.5

System:

   ios-deploy : 2.0.0
   NodeJS     : v8.11.3 (/usr/local/bin/node)
   npm        : 5.6.0
   OS         : macOS High Sierra
   Xcode      : Xcode 9.4.1 Build version 9F2000


Device info:
iphone X, iOS 11.4 (15F79)

有没有人知道如何解决这个问题？

谢谢

如何注释一个ion-row以使其充满剩余空间？

对于下面的示例，黄色行“ Content”应展开，直到占据所有剩余的（绿色）空间为止。

<ion-grid style="background-color: green; height: 100%;">
  <ion-row>
    <ion-col text-center style="background-color: purple;">
      <p>Example text</p>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col text-center style="background-color: yellow">
      <p>Content</p>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col text-center style="background-color: blue;">
      <p>Example text</p>
    </ion-col>
  </ion-row>
</ion-grid>

对于Bootstrap，也提出了类似的问题，并通过flex-grow解决了。请参阅：Bootstrap 4行填充剩余高度

但是，我们可以在坚持行/列语法的同时扩展行，而不引入更多的flexbox吗？

如果我从一个页面导航到另一个页面并多次返回,我可以通过硬件或浏览器后退按钮浏览整个路由器历史记录.

我想实现硬件后退按钮将我带到与ion-back-button工具栏中相同的页面.

例

第1页>第2页>第3页

我从第1 页导航到第2页.然后我从第2 页导航到第3页并ion-back-button多次返回.如果我然后按下硬件/浏览器后退按钮,我会再次进入第2 页和第3页.相反,如果我在第2页上按下它,我希望硬件/浏览器后退按钮导航到第1 页.

有很多关于如何在Ionic 3项目中包括Font Awesome的教程和文章，但是我很难找到有关如何将Font Awesome添加到Ionic 4项目中的任何方法。因此，这就提出了一个问题，如何在Ionic 4项目中添加和使用Font Awesome？

我尝试使用以下教程没有成功。我尝试按照以下StackOverflow答案中概述的步骤进行操作，该步骤也不起作用。

我使用离子4并尝试更改背景色离子选择选项。

html。

<div *ngIf="listName.checked" class="colorselect color_{{color.slice(1,7)}}">
        <ion-select (click)="prepareColorSelector()" (ionChange)="setColor(this.color,i)" [(ngModel)]="color">
     <ion-select-option (ionSelect)="selectColor(optioncolor)" *ngFor="let optioncolor of colors" [value]="optioncolor" style="background-color:optioncolor">{{optioncolor}}</ion-select-option>
    </ion-select>
</div>

scss。

.colorselect {
    .select-text {
            width: 75px;
            border-radius: 5px;
    }

    .alert-radio-inner,
    .alert-radio-icon,
    .alert-radio-label {
            display: none;
    }

    &.colorselected:before {
            content: '\2713';
            color: white;
            z-index: 999999;
            width: 100%;
            height: 100%;
            font-size: 33px;
            left: 50%;
            top: 50%;
            position: relative;
            transform: translate(-50%);
    }

    $colorsToSelect: "#d435a2" "#a834bf" "#6011cf" "#0d0e81";

    @each $colorOption in $colorsToSelect {
            $colorWithoutHash: str-slice($colorOption, 2, 7);

            &.color_#{$colorWithoutHash} {
                    &, & .select-text { …

The application I'm developing has this structure: there's two main pages with each a different side menu.

When accessing the first page, the right menu is being displayed. When accessing the second page from the first page, the right menu is also being displayed. The problem will occurred when trying to go the the first page again. The second menu is correctly hidden, but the menu from the first page is never displayed.

This is small repo to show the …

在 Capacitor/Ionic/Angular 应用程序中，我试图允许用户拍摄视频，在<video>标签中查看它，并且当用户提交视频数据时，我还需要能够在 POST 请求中发送视频数据。

我正在使用 Cordova 的 MediaCapture 插件获取视频，所以我得到的内容包含一个fullPath表单file://......

我所坚持的一点实际上是从完整路径中获取一个 File/Blob 对象。

我尝试使用Filesystem.readFile()from Capacitor Plugins，但问题是它需要一个path: string和一个directory: FilesystemDirectory. 如果我尝试只提供，{path: fullPath}我会收到“文件不存在”错误。FilesystemDirectory 只是给了我几个选项供我选择，但我不想使用它，因为我已经有了完整路径并且不想检查我应该在哪个设备中使用哪个目录。

我还有其他方法可以解决这个问题吗？

我有一个已经实现了离子幻灯片的 Ionic 4 项目。一切都很好，直到最近对 Ionic 进行了更新（不到一个月前），然后它们突然停止了工作。

在第一次加载时，它们似乎很好，但在之后的任何加载中：

• 寻呼机不工作或出现
• 图像大小不正确
• 滚动工作但不会像它应该的那样将幻灯片对齐到中心

第一次加载工作： 预期的离子载玻片图像

第二次加载没有： 离子载玻片损坏的图像

没有错误消息或警告，以下所有代码在 1 个月前都运行良好，此后没有进行任何更改。它只是随机破裂。

HTML：

<ion-slides #slides pager="true">
  <ion-slide *ngFor="let option of options; let i = index">
    <ion-card mode="md" [ngStyle]="{'background': borderColors[i]}">
      <img style="object-fit: contain; border-radius: 20px; padding: 2px;" [src]="option.imageUrl">
    </ion-card>
  </ion-slide>
</ion-slides>

TS：

import { Component, Input, ViewChild } from "@angular/core";
import { IonSlides } from "@ionic/angular";
import { ContestOption } from "src/app/models/contest-model";

@Component({
  selector: "app-results-swiper",
  templateUrl: "./results-swiper.component.html",
  styleUrls: ["./results-swiper.component.scss"]
})
export class ResultsSwiperComponent {
  @Input() options …

我在用

window.addEventListener('devicemotion', event => this.watchDeviceMotion(event))

watchDeviceMotion(event: any) {

  let motionData = {
    x: event.acceleration.x,
    y: event.acceleration.y,
    z: event.acceleration.z,
  }
  let rotationData = {
    alpha: event.rotationRate.alpha,
    beta: event.rotationRate.beta,
    gamma: event.rotationRate.gamma
  }

  if (this.getSensorData) {
    // console.log(JSON.stringify(motionData))
    // console.log(JSON.stringify(rotationData))
    this.userData.motionData.push(motionData)
    this.userData.rotationData.push(rotationData)
  }
}

使用带有 Angular 的 Ionic 访问 Android 设备上的加速度计数据。在应用程序内部时，事件以 60 Hz 的频率运行，但当应用程序切换到后台时，频率在前 5 分钟内下降约 9-10 Hz，并且在某个时刻仍处于后台时，它会以 60 Hz 的频率返回并且无限期地保持这样。

我也在使用后台插件

this.backgroundMode.enable();
this.backgroundMode.on('activate').subscribe(() => {
  this.backgroundMode.disableWebViewOptimizations();
});

我尝试将 disableBatteryOptimizations() 添加到具有 config.xml 中相应条件的后台插件，但仍然没有运气。

我还尝试了 Device Motion 和 Gyroscope 的插件，但它们的行为相同。

我应该如何防止频率变慢？有没有其他人遇到过这个问题？