我正在我的app.component.ts文件中检测到一个平台，我想在整个应用程序中向离子标题，离子内容，离子标题等标签添加几个不同的scss。 我想将全局前缀(取决于我检测到的设备)添加到整个应用程序页面，因此：
<my-page class="ion-page show-page">
默认情况下，每个离子页面都会生成此页面。 我希望能够添加其他类，以便我可以分层修改所有其他必需的类，这些类是这个类的子类，因此：
<my-page class="ion-page show-page **device-ios-iphonex**">
最好的方法是什么。我知道我可以使用：
let elem = <HTMLElement> document.querySelector('my-page');
为了清楚起见，我知道 -ios 前缀和 -md 前缀。但就我而言，我正在检测设备名称，并且我想为同一ios平台提供2个不同的规则/类。
并且基本上直接在"my-page"标签中添加一个类，但我认为这不是一种整洁或良好的编码方式，如果您在应用程序中有很多页面，那么它们也不是一个出色的执行者。
编辑
访问元素的方法是使用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>
原始答案(留给其他人)
这已经融入了框架。Ionic会自动将特定于平台的类添加到所有组件和大多数元素中。使用内置平台特定的 Sass 变量和 CSS 选择器组合器的组合，您可以设置页面上任何元素的样式，而无需添加自己的页面类。
离子组分 Sass 变量
离子组件(如警报、模态、卡片等)都具有自动注入的平台特定 Sass 变量。 文档中的每个组件页面都按平台描述各个组件变量。 完整列表可以在这里找到。
但是，假设您只想在iOS设备上将ion-content的背景颜色更改为不同的颜色。在这里，您可以使用 CSS 来利用注入的类。以下是您问题中提到的每个元素的示例：
适用于 iOS 的 ION-HEADER
要在 iOS 设备上更改ion-header中标头的背景颜色，您需要以工具栏为目标，提供足够的特异性来覆盖框架 CSS，如下所示：
.header-ios .toolbar-background-ios {
background-color: purple;
}
适用于 iOS 的 ION-TITLE
同样，如果要在 iOS 设备上更改标题中的字体颜色，请使用：
toolbar-title.toolbar-title-ios {
color: lavender;
}
适用于 iOS 的 ION-CONTENT
该框架不会为ion-content元素注入特定于平台的类，但您可以使用 CSS 中的相邻同级组合器来选择它，因为它是标头的相邻同级，它确实会获取特定于平台的类。 下面的规则会将ion-content元素的背景颜色设置为紫色，但仅适用于iOS 设备。
.header-ios + ion-content.content {
background-color: violet;
}