【指令篇】自定义mode实现平台样式选择

在【技巧】ionic3的小彩蛋这篇文件中，提到过一个内容：

一些组件提供mode属性，方便选择不同平台样式，但是有部分组件是没提供的，这时可以考虑强行添加目标平台对应的类名来覆盖原有样式，但是会存在风险。现实现一个指令来移除原有平台类名，并添加新平台类名，以降低风险。

关于指令的简单介绍可以看此文：【开发指南】（六）ionic3应该善用组件和指令，在此我们命令行创建一个指令：

ionic g directive myMode

它会创建一个指令目录及文件，打开ts文件，修改内容如下：

import { Directive, Input, ElementRef } from '@angular/core';

interface classObj{
  old: string;   //旧类名
  new: string;   //新类名
}

@Directive({
  selector: '[myMode]' // Attribute selector
})
export class MyModeDirective {

  option: classObj;

  @Input('myMode')
  set myMode(option: classObj){
    this.setClass(option);
  };

  constructor(private el: ElementRef) {
    this.setClass(this.option);
  }

  private setClass(option: classObj){
    if(option){
      this.el.nativeElement.classList.remove(option.old);    //移除旧类名
      this.el.nativeElement.classList.add(option.new);    //添加新类名
    }
  }
}

代码很好理解，就是在构造函数和设定myMode值时，移除旧类名，添加新类名。

具体怎么使用呢？首先在app.module.ts里的declarations里添加声明：

@NgModule({
  declarations: [
    MyModeDirective
  ]
})

然后用时，在目标组件上添加类似代码：

  <ion-list radio-group>
    <ion-item class="item-md">
      <ion-label>Cord</ion-label>
      <ion-radio value="cord" [myMode]="{old:'radio-ios', new: 'radio-md'}"></ion-radio>
    </ion-item>
  
    <ion-item class="item-md">
      <ion-label>Duesenberg</ion-label>
      <ion-radio value="duesenberg" [myMode]="{old:'radio-ios', new: 'radio-md'}"></ion-radio>
    </ion-item>
  </ion-list>

最后看效果：

ios上使用md样式

其实原理在官方文档中没有说明，只是个人分析得出，属于偏方性质，慎用！有兴趣的可以看看源码和使用浏览器调试不同平台的样式看看。