Ionic framework Ionic2-根据检测到的设备名称，将全局类添加到整个应用程序页面

我在app.component.ts文件中检测到一个平台，我想在整个app中的离子头、离子内容、离子标题等标记中添加几个不同的SCS。 我想在整个应用程序页面中添加一个全局前缀（取决于检测到的设备），以便：

<my-page class="ion-page show-page">

默认情况下，会为每个爱奥尼亚页面生成此页面。 我希望能够添加额外的类，以便我可以分层修改此类的子类所需的所有其他类，以便：

<my-page class="ion-page show-page **device-ios-iphonex**">

最好的方法是什么。我知道我可以使用：

let elem = <HTMLElement> document.querySelector('my-page');

let elem=document.querySelector（'my-page'）；

只是想说明一下，我知道-ios前缀和-md前缀。但在我的例子中，我正在检测设备名，我想为同一ios平台设置两个不同的规则/类。

基本上，在“我的页面”标签上直接添加一个类，但我认为这不是一种整洁或好的编码方式，如果你的应用程序中有很多页面，这也不是一个好的执行者。

EDIT 访问元素的方法是使用Angular的ElementRef类

您可以创建一个属性指令来添加到元素中，或者如果您希望它应用于整个页面，那么可以创建一个组件来包装页面内容。下面是如何在属性指令中使用它的示例

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

@Directive({
  selector: '[deviceType]'
})
export class DeviceTypeDirective {
  /*
     You could use a value provider as a constant that is set once 
     and a switch-case here to apply the proper class.
  */
    constructor(private renderer: Renderer2, private el: ElementRef) {
       this.renderer.addClass(this.el.nativeElement, 'yourclassname');
    }
}

您可以在组件中直接使用指令，而不是指令，如下所示：

@ViewChild('myElement') el:ElementRef;

constructor(private renderer: Renderer2, private el: ElementRef) {}

ionViewDidLoad() {
      this.renderer.addClass(this.el.nativeElement, 'yourclassname');   
}

<ion-content #myElement>...</ion-content>

在模板中，您将添加引用变量，如下所示：

@ViewChild('myElement') el:ElementRef;

constructor(private renderer: Renderer2, private el: ElementRef) {}

ionViewDidLoad() {
      this.renderer.addClass(this.el.nativeElement, 'yourclassname');   
}

<ion-content #myElement>...</ion-content>

iOS的ION-TITLE 同样，如果要在iOS设备上更改标题中的字体颜色，请使用：

toolbar-title.toolbar-title-ios {
    color: lavender;
}

iOS的离子内容 框架不会为

ion content

元素注入特定于平台的类，但是您可以使用in-CSS来选择它，因为它是标头的相邻同级，标头会获取特定于平台的类。下面的规则将

离子内容

元素的背景色设置为紫色，但仅适用于iOS设备

.header-ios + ion-content.content {
    background-color: violet;
}

---

我已经知道了。在我的例子中，我检测到一个设备名，我想为iphone7和iphoneX添加不同的类和规则。所以两者都使用iOS平台，但设备名称不同。因此，在我的情况下，使用-ios作为前缀将不起作用。