Angular 2 - 按类名添加/删除类

Question

在我的应用程序中，我将根据设备方向添加或删除一个类。因此，如果应用程序是纵向的，那么事情将保持原样。如果是风景，那么应该添加一个类。

我知道我可以使用 [class.ClassName] 轻松做到这一点 -

<div class="parentclass" [class.landscapeClass]="makeTrue">
 <span></span>
</div>

但问题是我必须在多个模板中重复此更改。

如何在使用另一个类(parentclass)的地方轻松添加和删除一个类(在我的示例中为landscapeClass)？当应用程序是纵向时将其删除。

我正在使用 cordova screen orientation plugin 获取应用程序的方向。

我正在使用 Angular2 RC4，并且正在寻找无需使用 Jquery 的解决方案。

编辑:我试图找到这样的解决方案的原因是，当键盘在 Android 上出现时，使用媒体查询会弄乱我的 UI。我知道使用纵横比的解决方案，但这不是 100% 可靠的解决方案。

Answer 1

如果该类仅用于调整元素的样式，则可以使用 css 媒体查询来检查纵向方向，而不是添加类。

@media only screen and (orientation: portrait) {}
@media only screen and (orientation: landscape) {}

编辑:您还可以将类放在更全局的元素上，并使用方向玻璃开始选择器。

CSS:

.orientationPortrait .parentClass { /* styling */}

萨斯:

.parentClass {
  .orientationPortrait & { /* styling */}
}