Angular 5 和 :host 伪类答案

【问题标题】：Angular 5 and :host pseudo classAngular 5 和 :host 伪类
【发布时间】：2017-11-17 04:57:21
【问题描述】：

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

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

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

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

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

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

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

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

提前致谢！

【问题讨论】：

标签： css css-selectors pseudo-class angular5

【解决方案1】：

你可以使用：

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

在css中定义isLeft，并放入：

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

【讨论】：

这不能回答问题。
我不应该在 scss 文件中包含所有样式，因此我认为在这种情况下使用 @HostBinding 中的样式不会起作用。我已经包含了上面的所有代码以更好地显示问题。

【解决方案2】：

代码已包含

encapsulation: ViewEncapsulation.None

现在可以工作了。

【讨论】：