根据 Ionic 5 中的平台显示/隐藏元素

Question

在我的项目中，我想使用带有标签和图标的“离子项目”。类似的东西：

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

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

我的问题是：有没有办法根据平台隐藏/显示元素？

我看到有人在谈论 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>