0

我一直在 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 的唯一方法是在组件中包含样式，这违反了我们公司的标准。

提前致谢！

4

2 回答 2

0

你可以使用：

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

在css中定义isLeft，并输入：

@HostBinding('class.isLeft') someField: boolean = true;
于 2017-11-15T23:03:26.690 回答
0

代码已包括

encapsulation: ViewEncapsulation.None

现在正在工作，它已被删除。

于 2017-11-16T20:57:21.087 回答