Angular9结合Ionic5如何通过TypeScript代码获取当前Ionic模式

可以直接通过TypeScript获取当前应用的Ionic模式，无需读取HTML标签的mode属性，核心是借助Ionic提供的Config服务实现。

实现步骤 #

• 从@ionic/angular导入Config服务
• 在需要获取模式的组件/服务的构造函数中注入Config实例
• 调用Config的get('mode')方法读取模式值

代码示例 #

// 基础导入
import { Component } from '@angular/core';
// 导入Ionic的Config服务
import { Config } from '@ionic/angular';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  // 类型约束为仅允许md/ios，避免类型报错
  currentMode: 'md' | 'ios';

  constructor(private config: Config) {
    // 直接读取Ionic生效的模式
    this.currentMode = this.config.get('mode');
  }
}

补充说明 #

• 该方法读取的是Ionic实际用于UI渲染的模式值：无论是手动全局指定的模式（如在app.module.ts中通过IonicModule.forRoot({ mode: 'ios' })强制设置），还是Ionic根据设备自动匹配的默认模式，都能准确返回。
• 注意与Platform服务的区别：Platform用于获取设备真实运行平台（如android、iphone），其返回值与Ionic模式可能不一致（例如在Android设备上强制设置Ionic模式为ios时，Platform仍返回设备平台信息，但Config会正确返回ios），完全匹配你获取与实际平台可能不一致的Ionic模式的需求。
• 该实现是Ionic官方提供的TypeScript侧能力，仅未在《Platform styles》的CSS相关文档中提及。

内容的提问来源于stack exchange，提问作者Adam H