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;
}
```

您可以将封装设置为无组件

@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

是否可以使用＆＃39; +＆＃39;选择器：Angular 6上的主机？

1 个答案: