小编Rag*_*hav的帖子

我刚刚设置了 Ionic 4 项目，并且有 Angular 7 版本，但我想将 Angular 7 版本更新为 8，我正在运行以下 cmd 但显示错误。

我正在运行的命令：

ng 更新 @angular/cli @angular/core

npm install --save-dev @angular-devkit/build-angular

即将出现的错误：

无法从“/home/Projects/myProjectName”找到模块“@angular-devkit/build-angular”。错误：无法从“/home/Projects/myProjectName”中找到模块“@angular-devkit/build-angular”。

任何帮助深表感谢。

我正在使用Ionic 4应用程序，当用户在移动后退按钮上单击2次时，它应关闭该应用程序，但这没有发生。

这是我的app.component.ts：

lastTimeBackPress = 0;
timePeriodToExit = 2000;
@ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;

constructor(){
this.backButtonEvent();
}

backButtonEvent() {
    document.addEventListener("backbutton", () => { 
      this.routerOutlets.forEach((outlet: IonRouterOutlet) => {
        if (outlet && outlet.canGoBack()) {
            outlet.pop();
        } else if (this.router.url === '/tabs/tab1') {
          if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {
            navigator['app'].exitApp(); //Exit from app
            } else {
            this.presentAlertConfirm();
            this.lastTimeBackPress = new Date().getTime();
          }
          // navigator['app'].exitApp(); // work for ionic 4
        }
      });
    });
  }

  async presentAlertConfirm() {
    const alert = await this.alertController.create({ …

我正在使用 Ionic 4 应用程序并安装了该ngx-translate插件。它工作正常，app.component.html但tabs.page.html显示错误。

找不到管道“翻译”

这是我的app.component.html：

<ion-list class="mylist22" color="myheader">
    <ion-item color="myheader">
        <ion-label>Gender</ion-label>
        <ion-select [(ngModel)]="languageSelected" (ionChange)='setLanguage()'>
            <ion-select-option value="en" selected>English</ion-select-option>
            <ion-select-option value="ar">Arabic</ion-select-option>
        </ion-select>
    </ion-item>
</ion-list>

在这个视图中，我有语言选择框。

这是我的app.component.ts：

import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  languageSelected: any = 'en';
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private translate: TranslateService
  ) {
    this.translate.addLangs(['en', 'ar']);
    this.translate.setDefaultLang('en');
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => { …

我正在使用 Ionic 4 应用程序，并且已经安装了 Ionic 4 选项卡主题，并且通过在app.component.html 中添加标题代码使标题通用，但问题是我的标题与标题重叠。

这是我的app.component.html：

<ion-header>
    <ion-toolbar>
    <ion-icon name="more" slot="end"></ion-icon>
    </ion-toolbar>
</ion-header>
<ion-app>
    <ion-router-outlet></ion-router-outlet>
</ion-app>

这是我的tab1.page.html：

<ion-content>
    <ion-card class="welcome-card">
        <ion-img src="/assets/shapes.svg"></ion-img>
        <ion-card-header>
        <ion-card-subtitle>Get Started</ion-card-subtitle>
        <ion-card-title>Welcome to Ionic</ion-card-title>
        </ion-card-header>
        <ion-card-content>
        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
        </ion-card-content>
    </ion-card>
</ion-content>

我刚刚在 Ionic 4 中安装了新的标签主题，我只做了这些更改。

任何帮助深表感谢。

这是我的StackBlitz

我正在研究Ionic电子商务应用程序并使用Laravel中的API.我已经在购物车中添加了产品,但是当我增加购物车中的产品数量时,产品的价格却在增加,但总价格没有更新,而且当从购物车中取出产品时,它也没有更新价格.

这是我的cart.html:

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Your Cart
    </ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
  <ion-list *ngFor="let itm of cartItems" class="myitem11">
    <ion-item>
      <ion-thumbnail item-start >
        <img src="{{itm.image}}">
      </ion-thumbnail>
      <h2>{{itm.name}}</h2>
      <p>Actual Price:
        <span [ngStyle]="itm?.discountp === '0' ? {'text-decoration':'none'} : {'text-decoration':'line-through'}">
          ?{{itm.disprice * itm.count}}
        </span>
      </p>
      <p>Discount: {{itm?.discountp}}%</p>
      <ion-row class="item-count">
        <ion-col class="qty">
            <button (click)="decreaseProductCount(itm)" clear ion-button small color="dark" class="mewbtn11">
              -
            </button>
            <button ion-button small clear color="dark" class="mewbtn11">
              {{itm?.count}}
            </button>
            <button (click)="incrementProductCount(itm)" clear ion-button small color="dark" …

我正在将参数从一个组件传输到 app.component.ts 但错误即将到来。错误：没有 NavParams 的提供者。

这是我的app.component.ts：

import { FrontPage } from "./../pages/front/front";
import { Component, ViewChild } from "@angular/core";
import { Nav, Platform, NavController, NavParams } from "ionic-angular";
import { StatusBar } from "@ionic-native/status-bar";
import { SplashScreen } from "@ionic-native/splash-screen";
import { HomePage } from "../pages/home/home";
import { ListPage } from "../pages/list/list";
import { ProductPage } from "../pages/product/product";
import { LoginpagePage } from "../pages/loginpage/loginpage";

@Component({
  templateUrl: "app.html",
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  menuclick: boolean = …

I am working in my Ionic 4 project and I have added the ion-avatar but it is not coming in the center of the

This is my editprofile.page.html:

<ion-item class="newitem2">
    <ion-avatar>
        <img name="profile_pic" [src]="this.userdetailsedit.value.profile_pic"/>
    </ion-avatar>   
</ion-item>

Any help is much appreciated.

I am working in my Ionic 4 project and I have used the native date picker plugin. It is working fine but I am not able to set the min and max date in it for the Android.

This is my tab2.page.html:

<ion-input formControlName="startchallenge" placeholder="Select Date" (click)="datePickershow()" [readonly]=true></ion-input>

This is my tab2.page.ts:

datePickershow(){
this.datePicker.show({
      date: new Date(),
      mode: 'date',
      androidTheme: this.datePicker.ANDROID_THEMES.THEME_HOLO_DARK,
      minDate: new Date().toISOString(),
      maxDate: new Date(new Date().setDate(new Date().getDate() + 10)).toISOString(),
    }).then(
      date => console.log('Got date: ', date)}, …

我在Ionic 4应用程序中工作，我想更改工具栏的背景颜色，但是它不起作用。

我尝试过的

ion-toolbar {
    --background: #f2f2f2;
}

ion-toolbar {
    background: #f2f2f2 !important;
}

喜欢：

颜色：var（-ion-color-contrast）;

在哪里定义--ion-color-contrast。在variables.scss文件中或其他用于更改颜色的位置。

任何人都可以帮助我如何variables.scss在Ionic 4中定义变量以更改颜色。