标签: ionic5

我有Ionic 3项目，我必须升级到Ionic 5。请需要升级项目的最佳方式。

我正在触摸（滚动）而不是像它应该的那样（猜测）点击时触发涟漪效应。这发生在ion-ripple-effect标签上或离子标签中，默认情况下具有涟漪效应（如ion-item）。

这是我使用的代码片段ion-ripple-effect tag：

<ion-row class="dash ion-margin-top">
  <ion-col size-xs="6" size-sm="4" size-md="3" *ngFor="let item of dash">
    <div class="box shadow">
      <div class="content ion-activatable" routerLink="{{item.route}}">
        <ion-icon name="{{ item.icon }}" color="primary"></ion-icon>
        <ion-label color="dark">{{ item.name }}</ion-label>
        <ion-ripple-effect></ion-ripple-effect>
       </div>
    </div>
  </ion-col>
</ion-row>

有没有人遇到过这个，如果有，知道谁来解决它？

提前致谢。

我的项目在 IONIC 5 和 Firstore 中。经过ion-router-outlet身份验证的（主页）和未经身份验证的（索引）路由有 2 种不同。以下是为 class 中的用户动态打开登录/主页的代码app.component.ts。

  this.afAuth.authState.subscribe(user => {
    if (user) {
      this.router.navigateByUrl('home');
    } else {
      this.router.navigateByUrl('index');
    }
  }); 

流程：登录页面->（登录）->首页->（退出）->登录页面。当主页打开时，登录页面仍会加载并位于导航堆栈中。在ngOnDestroy登录页面的不执行。注销后，登录页面再次打开，但类 constructor 和ngOnInit方法不执行。这会导致很多问题，因为页面初始化没有重新加载。Flow Home Page -> (logout) -> Login Page -> (login) -> Home Page 也发生了同样的问题。如何在登录后销毁登录页面和注销后的主页，以便在同一会话中重新打开时可以重新加载？

编辑：

以下是路由配置：

app-routing.module.ts

const routes: Routes = [
  {
    path: 'home',
    canLoad: [AuthGuard],
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
  },
  {
    path: 'index',
    loadChildren: () => import('./index/index.module').then(m => m.IndexPageModule)
  },
];

无论是Home.html …

我为 Ionic 和 Capacitor 构建了一个 Capacitor 插件，并将其发布到 NPM - 称之为它test1。然后我在我的 Ionic 5 项目中使用它并通过以下方式成功添加一个新的 Android 项目：

ionic build 
ionic cap add android 
ionic cap sync

测试了一下，它有效。然后我尝试通过以下方式添加 iOS：

ionic build 
ionic cap add ios 

然后我收到以下错误：

`[!] No podspec found for `Test1` in `../../node_modules/test1```

但它失败了。我不明白为什么，因为Test1Plugin.podspec根目录中有一个具有相关依赖项的文件和一个ios/Podfile具有相关依赖项的文件。我还确保这两个文件都发布到 npm。

我尝试将文件名更改.podspec为Test1.podspec，但这是完全相同的问题。

我很困惑，希望有人能给我一些指示，因为我已经在这方面有一段时间并尝试了一切。

检查新的离子电容器文档，目前似乎没有隐藏浏览器插件（以前的 InAppBrowser）的网址栏的选项。需要帮助请。

在 Ionic 3 中，将数据传递到弹出窗口非常简单：

let popover = this.popoverCtrl.create(PopoverPage, {key1:value1, key2: value2});

并且可以通过以下方式检索它navParams

如何在 Ionic 5 中实现同样的目标？该文档没有提及传递数据。

我有一个 Ionic 5/Angular 应用程序，它使用 Ionic Native Camera 插件来拍照并裁剪图像。在我更新到 Android 11（使用 note 10 plus）之前，该功能一直运行良好。更新后，裁剪时抛出以下错误：无法保存裁剪后的图像 - 访问被拒绝。

TS代码：

takePicture() {
    this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE, 
    this.androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE]);

    const options: CameraOptions = {
      quality: 100,
      targetHeight: 1920,
      targetWidth: 1080,
      sourceType: 1, // CAMERA
      destinationType: 0, // DATA_URL
      encodingType: this.camera.EncodingType.JPEG,
      correctOrientation: true,
      allowEdit: true
    };

    this.camera.getPicture(options).then((imageData) => {
     // Persist image data
    });
  }

应用程序在其他设备上运行良好。还检查了我的应用程序、图库应用程序和照片编辑器应用程序是否具有存储和相机权限。我可以拍照，裁剪器会打开 - 点击“完成”后，会显示“访问被拒绝”消息，紧接着会显示“无法保存裁剪后的图像”。

1. 什么可能导致错误？
2. 如何查看哪个应用程序被设置为设备的默认裁剪应用程序？
3. 如何清除/重置默认裁剪应用程序？

注意：我在另一台运行 Android 11 的设备上进行了测试，结果出现了相同的错误。

尝试添加CAPACITOR_ANDROID_STUDIO_PATH环境变量为。

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.barqrscanner.app',
  appName: 'barqrscannerapp',
  webDir: 'www',
  bundledWebRuntime: false
};

export interface PluginsConfig {
  [CAPACITOR_ANDROID_STUDIO_PATH: string]: | {
        [CAPACITOR_ANDROID_STUDIO_PATH: string]: 'D:\\android-studio-canary\\bin\\studio64.exe';
      }
    | undefined;
}

export default config;

如果我尝试将其添加到 .

const config: CapacitorConfig = {
  appId: 'com.barqrscanner.app',
  appName: 'barqrscannerapp',
  webDir: 'www',
  bundledWebRuntime: false,
  CAPACITOR_ANDROID_STUDIO_PATH: 'D:\\android-studio-canary\\bin\\studio64.exe'
};

会给出这样的错误。

ionic build有效，但是当我运行npx cap open android它们CapacitorConfig并且PluginsConfig不工作时，它显示了这个问题。

    PS D:\Projects\BarQrScannerApp> npx cap open android
[error] Unable …

您好，我在我的项目中使用 ionic 5，最近迁移到 ionic 6，一切看起来都很棒，但我担心的一件事是日期时间选择器，我希望以这种方式使用旧样式，请帮忙！

subscribeWithPriority不使用 Ionic 5 进行调用。

这是我的app.component.ts功能：

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      alert("initialed!"); // this called, and I can see this.
      this.platform.backButton.subscribeWithPriority(0, (processNexthandler) => {
        console.log('Back press handler!');
        alert(888) // this never called
      });
   }
}

第一个警报显示它已调用initializeApp，但我从未看到下一个警报888。我尝试了其他优先级，例如9999或0, -1`，但这些都不起作用。

如何正确使用调用我的函数subscribeWithPriority？