Show/hide 元素根据 Ionic 5 中的平台

Question

在我的项目中，我想使用带有标签和图标的 'ion-item'。类似的东西：

<ion-item>
   <ion-label>Itens</ion-label>
   <ion-label><i class="icon-search"></i></ion-label>
</ion-item>

问题是 IOS 已经默认使用了 'ion-item' 中的图标。我不想只为 android 更改按钮模式，我想仍然使用原生元素样式。

我的问题是：有没有办法根据平台hide/show元素？

我看到有人在 Ionic 3 中谈论 'showWhen' 属性但显然，它不再工作了...

Answer 1

Ionic 具有“平台”服务，可以通过编程方式为您提供当前用户平台的上下文：

https://ionicframework.com/docs/angular/platform

您可以按照文档说明导入和注入它：


import { Platform } from '@ionic/angular';
    
    @Component({...})
    export class MyPage {
      
      ios: boolean;
      android: boolean;
      
      constructor(public platform: Platform) {
          this.ios = platform.is('ios');
          this.android = platform.is('android');
      }

    }

然后您可以简单地将组件绑定到布尔属性：

<ion-item *ngIf="ios">
   <ion-label>Itens</ion-label>
   <ion-label><i class="icon-search"></i></ion-label>
</ion-item>

Show/hide 元素根据 Ionic 5 中的平台

Show/hide elements according to platform in Ionic 5

ionic-framework

ionic5