css - Angular 5 和 :host pseudo class

Question

我一直在 Angular 4 中使用 :host 伪类，没有任何问题。我们正在转换为 Angular 5，现在样式似乎没有添加到主机组件中。现在在新版本的 Angular 中是否有不同的方法来添加它？

:host {
  border: 10px solid black;
  &.isLeft {
    display: flex;
  }
}

@media (max-width: 599px) {
  :host {
    display: flex;
  }
}

isLeft 类是根据从父组件传递到组件的参数设置的，因为此特定控件可以以 2 种不同的格式显示，其中一种是响应式的。在组件内部，我有以下代码:

  @HostBinding('class.isLeft') isLeft: boolean; 

  @Input()
  placement: string = 'responsive';

  ngOnInit() {
    this.isLeft = (this.placement.toLowerCase() === 'left');
  }

我知道有人建议使用@HostBinding 来完成所有这些。首先，我不确定当我必须使用媒体查询时它会如何工作。其次，使用 @HostBinding 的唯一方法是在组件内部包含样式，这违反了我们公司的标准。

提前致谢!

Answer 1

你可以使用:

@HostBinding('style.border') styleborder = '10px solid black';

在 css 中定义 isLeft，并放置:

@HostBinding('class.isLeft') someField: boolean = true;