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

Question

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

我知道我可以使用[class.ClassName] -

轻松完成此操作

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

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

如果使用另一个类（landscapeClass），我怎样才能轻松添加和删除类（我的示例中为parentclass）？当应用程序是纵向时删除它。

我使用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 */}
}