Можно ли использовать селектор '+' с: host на Angular 6?

Question

Я пытаюсь добавить поле 2rem между равными компонентами, используя селектор plus (+) css внутри собственного декоратора, но он не работает.

Есть ли способ инкапсулировать это поведение внутри компонента?

@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

Там нет красивого пути для этого.Есть четыре способа, которыми я могу придумать

1. . Вы можете создать глобальный стиль .scss и включить его в свою сборку.Это не будет иметь никакой инкапсуляции.

   bx-button + bx-button {
     margin-left: 2rem;
   }
   

2. Вы можете установить Инкапсуляцию на Ни один из компонентов

   @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;
          }
      `]
   })
   

3. Вы можетеиспользуйте устаревший селектор ::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;
          }
      `]
   })
   

4. Вы обрабатываете его в компоненте хоста, где он использует bx-button