是否可以在 Angular 6 上使用带有 :host 的“+”选择器？答案

【问题标题】：Is it possible to use '+' selector with :host on Angular 6?是否可以在 Angular 6 上使用带有 :host 的“+”选择器？
【发布时间】：2018-06-05 03:04:11
【问题描述】：

我正在尝试使用自己的装饰器中的加号 (+) css 选择器在相等的组件之间添加 2rem 边距，但它不起作用。

有没有办法将这种行为封装在组件内部？

@Component({
  selector: 'bx-button',
  template: `
    <button class="bx--btn bx--btn--{{type}} {{className}}" type="button"
       [disabled]="disabled" [ngClass]="{'bx--btn--sm' : small}">
      <ng-content></ng-content>
     </button>
   `,
   styles: [`
     :host + :host {
       margin-left: 2rem
     }
   `]
})

【问题讨论】：

标签： angular sass angular6

【解决方案1】：

这没有什么好办法。我能想到四种方法

您可以创建一个全局样式 .scss 并将其包含在您的构建中。这不会有任何封装。
```
bx-button + bx-button {
  margin-left: 2rem;
}
```

您可以将组件的封装设置为None

@Component({
  selector: 'bx-button',
  template: `
    <button class="bx--btn bx--btn--{{type}} {{className}}" type="button"
       [disabled]="disabled" [ngClass]="{'bx--btn--sm' : small}">
      <ng-content></ng-content>
     </button>
   `,
   encapsulation: ViewEncapsulation.None,
   styles: [`
       bx-button + bx-button {
          margin-left: 2rem;
       }
   `]
})

您可以使用已弃用的::ng-deep 选择器

@Component({
  selector: 'bx-button',
  template: `
    <button class="bx--btn bx--btn--{{type}} {{className}}" type="button"
       [disabled]="disabled" [ngClass]="{'bx--btn--sm' : small}">
      <ng-content></ng-content>
     </button>
   `,
   styles: [`
       ::ng-deep bx-button + bx-button {
          margin-left: 2rem;
       }
   `]
})

您在使用bx-button的主机组件中处理它

【讨论】：

我已经尝试过第二项的封装 none 并且它没有工作。一旦我创建了一个外部库，我认为最好的解决方案将是第一个，但我不确定如何在角度库上外部化 scss 文件。我现在会做一些研究。非常感谢！！
@ViníciusPavin 你可以在angular.json 内的styles 数组中添加一个scss 文件。关于封装，我没有测试，但我猜它也需要::ng-deep选择器