标签: ionic4

我正在尝试对 web 和设备使用相同的 html，并且在某些情况下我需要显示/隐藏 web html 或设备 html。

Ionic 4中的showWhen和hideWhen指令在哪里？如果它们消失了，它们是否被其他东西取代？

截至目前，我能找到的只是一些测试页面，但这并没有说明太多。

我正在尝试在我的 ionic(4) 科尔多瓦应用程序中使用 Keycloak-js（来自 4.4.0.Final）库。我遵循了文档中的示例和说明。我已经安装, , . 添加到我的 这就是我对 config.xml 的修改的样子。cordova-plugin-browsertabcordova-plugin-deeplinkscordova-plugin-inappbrowser<preference name="AndroidLaunchMode" value="singleTask" />config.xml

<widget id="org.phidatalab.radar_armt"....>

<plugin name="cordova-plugin-browsertab" spec="0.2.0" />
<plugin name="cordova-plugin-inappbrowser" spec="3.0.0" />
<plugin name="cordova-plugin-deeplinks" spec="1.1.0" />
<preference name="AndroidLaunchMode" value="singleTask" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<universal-links>
    <host name="keycloak-cordova-example.exampledomain.net" scheme="https">
        <path event="keycloak" url="/login" />
    </host>
</universal-links>
</widget>

我使用的服务Keycloak-js如下所示。

static init(): Promise<any> {
  // Create a new Keycloak Client Instance
  let keycloakAuth: any = new Keycloak({
      url: 'https://exampledomain.net/auth/', …

我在设计 ionic 4 移动应用程序布局时遇到了很多问题。我花了一段时间才弄清楚如何为应用程序设置背景图像，但现在我在放置 ion-item 标签的任何地方都得到了一个白色矩形。我尝试设置离子项目 {background: transparent important!} （在页面 scss 中）但它不起作用。我是一个完整的 ionic 初学者！

注册页面.scss

:host { ion-content {
--background:none;
background: url('../../assets/imgs/hoghi/bg.jpg')  no-repeat 100% 100%;
background-size: cover;
background-position: center center;

ion-item {
  background-color: transparent !important;
  background: transparent !important;
  opacity:1;
}//end of item}//end of content}//end of :host

注册页面.html

<ion-content>
  <ion-item>
    <ion-label position="floating">Name</ion-label>
    <ion-input></ion-input> 
  </ion-item>
</ion-content>

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)}, …

我想获取 APK 文件，以便我可以手动安装它，而不是通过 android studio 运行。如果我在 android 目录中搜索，我可以看到一些，最有可能的是： [project]\android\app\build\intermediates\instant-run-apk\debug\app-debug.apk

但是，这不能在我的设备上正确安装。如果我使用以下方法通过 Ionic 构建和运行 Android Studio，它就可以正常工作： ionic capacity run android

我是否需要进行签名的生产构建才能使其正常工作？

试图在我的 ionic 4 项目中更改侧滑菜单背景的颜色

这是我的代码：

<ion-app>
  <ion-split-pane>
    <ion-menu>
      <ion-header>
        <ion-toolbar color="medium">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content background = "medium">
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

它只会改变ion-toolbar背景颜色，这是它的外观

离子滑块在最后一张幻灯片中隐藏下一个按钮并在第一张幻灯片中隐藏上一个按钮尝试使用 ngIf 实现此功能，但它不起作用 ionic 4

<ion-slides #slides>
(...)
</ion-slides>
<button ion-button *ngIf="slides.isBeginning()">prev</button>
<button ion-button *ngIf="slides.isEnd()">Next</button>

我在 ionic4 中使用 ion-slide，我想通过单击按钮手动转到下一张幻灯片。我看过 ion-slide 文档，其中提到了slideNext方法。但是我不知道如何使用这种方法来更改幻灯片。

我在 ionic 4 和 angular 7 中遇到滚动问题。

我有以下结构：

<ion-grid>
    <ion-row>
      <ion-col>
       <ion-card>
        <ion-card-header>
         <!-- some content -->
        </ion-card-header>
        <ion-card-content>
         <ion-list>
          <!-- some ion-item -->
         </ion-list>
        </ion-card-content>
       </ion-card>
      </ion-col>

      <ion-col>
      </ion-col>
    </ion-row>
</ion-grid>

我使用ion-card-content以下 scss 代码在我的上滚动：

ion-card-content {
  max-height: calc(100% - #{50px});
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  ::-webkit-scrollbar {
    display: none;
  }
}

如果我在我的离子卡上应用以下 scss 代码，滚动将不起作用：

ion-card {
  max-height: 100%;
}

如果我在我的 ion-card 上应用以下 scss 代码，滚动可以工作，但 ion-card 的大小仍然相同，当我的 ion-list 中没有 ion-item 时，它会占用所有屏幕：

ion-card {
  height: 100%;
}

你知道有什么方法可以执行滚动并保持根据离子列表大小调整大小的高度吗？

我尝试在我的离子项目中导入存储模块。但是当我添加提供者存储时，错误发生了变化。错误变为“无法解决所有存储：(?)”我该如何解决此错误？你能帮我吗？我在下面写了我的代码。我看这个视频：https : //www.youtube.com/watch?v=h_IhS8QQjUA&list=PLNFwX8PVq5q7S-p_7zO99xdauhDsnMPw0&index=17&t=0s

应用模块 ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import {Storage} from '@ionic/storage';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { IonicStorageModule  } from '@ionic/storage';
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,IonicStorageModule.forRoot()],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: …