在 Ionic 5 中根据平台显示/隐藏元素答案

【问题标题】：Show/hide elements according to platform in Ionic 5在 Ionic 5 中根据平台显示/隐藏元素
【发布时间】：2020-10-27 18:53:07
【问题描述】：

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

<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”属性，但显然，它不再起作用了......

【问题讨论】：

您是否考虑使用 ion-icon 代替？
我有一些我想使用的自定义图标。除非我学会如何使用 ion icon，否则我必须使用

标签： ionic-framework ionic5

【解决方案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>

【讨论】：