问题 (The Problem)

I recently ran into an issue working on the Breeze Airways mobile app UI. Our app UI is so distinctly unique that we actually want almost all our components to not render to the native feel. In order to save time, we made the decision to force the app to always render its components inmd (Android) mode. This can easily be accomplished passing in a config variable inside your app.module

我最近在使用Breeze Airways移动应用程序UI时遇到了一个问题。 我们的应用程序用户界面是如此独特，以至于我们实际上希望几乎所有组件都不会呈现出原生的感觉。 为了节省时间，我们决定强制应用程序始终以md (Android)模式呈现其组件。 可以很容易地通过在app.module内部传递一个配置变量来实现

We did this so we only needed to reskin the Android Ionic components. The caveat was when we wanted a select few components to render native-looking controls, for example ion-select . This left us with the need to dynamically apply a mode to those select components based on the device the app is running on and overriding the root mode we set earlier.

我们这样做是为了重新封装Android Ionic组件。 需要注意的是，当我们想要选择一些组件来呈现看起来很自然的控件时，例如ion-select 。 这使我们有必要根据应用运行所在的设备，动态地将模式应用于那些选择的组件，并覆盖我们之前设置的root模式。

输入角度指令 (Enter Angular Directives)

Using a simple Angular attribute directive we were able to easily accomplish this:

使用简单的Angular属性指令，我们可以轻松实现此目的：

import { Directive, ElementRef  } from '@angular/core';
import { Platform } from '@ionic/angular';
@Directive({
  selector: '[appPlatform]'
})
export class PlatformDirective {
  constructor(el: ElementRef, platform: Platform) {
    let mode = 'md';
    // Determine if the device platform is ios or not
    if (platform.is('ios')) {
      mode = 'ios';
    }
    // Set the platform for the element
    el.nativeElement.setAttribute('mode', mode);
  }
}

The directive simply checks the device platform and applies the correctmode attribute to the element. We can now use this on any components that we want to render native: <ion-select appPlatform> .

该指令仅检查设备平台并将正确的mode属性应用于该元素。 现在，我们可以在要呈现本机的任何组件上使用它： <ion-select appPlatform> 。

Another neat trick is that Ionic passes the mode down to all child elements so you can wrap multiple components you want to render native in any other tag, a div for example:

另一个巧妙的技巧是Ionic将模式向下传递给所有子元素，因此您可以在任何其他标签(例如div包装要本地渲染的多个组件：

<div appPlatform>
  <ion-select>                            
    <ion-select-option value="0">0</ion-select-option>                                             
    <ion-select-option value="1">1</ion-select-option>                                         
    <ion-select-option value="2">2</ion-select-option>
  </ion-select>
</div>

And there you have it!

在那里，您拥有了！