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

Posted 2021-04-06

我在app.component.ts文件中检测到一个平台，我想在我的整个应用程序中添加几个不同的scss到ion-header，ion-content，ion-title等标签。我想在整个应用页面添加一个全局前缀（取决于我检测到的设备），因此：

<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选择器组合器的组合，您可以设置页面上任何元素的样式，而无需添加自己的页面类。

IONIC COMPONENT Sass Variables

离子组件（如警报，模态，卡片等）都具有自动注入的特定于平台的Sass变量。文档中的每个组件页面都按平台描述了各个组件变量。完整列表可以找到here。

但是，假设您想要仅在iOS设备上将ion-content的背景颜色更改为其他颜色。在这里，您可以使用CSS来利用注入的类。以下是您问题中提到的每个元素的示例：

ION-HEADER for iOS

要在iOS设备上更改ion-header中标题的背景颜色，您需要定位工具栏，提供足够的特异性来覆盖框架CSS，如下所示：

.header-ios .toolbar-background-ios {
    background-color: purple;
}

ION-TITLE for iOS

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

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

ION-CONTENT for iOS

该框架没有为ion-content元素注入特定于平台的类，但您可以使用CSS中的adjacent sibling combinator来选择它，因为它是标题的相邻兄弟，它确实获得特定于平台的类。下面的规则将ion-content元素的背景颜色设置为紫色，但仅适用于iOS设备。

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