是否可以在 Angular 6 上将“+”选择器与 :host 一起使用？

Question

我试图在自己的装饰器中使用加号 (+) 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
     }
   `]
})

Answer 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

是否可以在 Angular 6 上将“+”选择器与 :host 一起使用？

Is it possible to use '+' selector with :host on Angular 6?

sass

angular

angular6