角度组件包装器混淆了布尔玛风格

Question

对于使用Bulma设置Angular应用的样式来解决此问题，我有些困惑。我认为问题的症结在于这部分Sass：

%block
  &:not(:last-child)
    margin-bottom: 1.5rem

=block
  @extend %block

当我（说）两个标签并排时，它们的间距为1.5rem。但是，如果我使一个具有相同制表符内容的组件并将两个组件彼此相邻放置，则填充便消失了，大概是因为一旦将内容隔离在Angular组件包装器中，该组件所做的一切都将无法保存。

Stackblitz demo

app.component.html

<div class="tabs is-medium">
  <ul>
    <li><a href="javascript:void(0);">Foo</a></li>
    <li><a href="javascript:void(0);">Foo</a></li>
  </ul>
</div>

<div class="tabs is-medium">
  <ul>
    <li><a href="javascript:void(0);">Foo</a></li>
    <li><a href="javascript:void(0);">Foo</a></li>
  </ul>
</div>

<tabs-component></tabs-component>
<tabs-component></tabs-component>

tabs.component.html

<div class="tabs is-medium">
  <ul>
    <li><a href="javascript:void(0);">Foo</a></li>
    <li><a href="javascript:void(0);">Foo</a></li>
  </ul>
</div>

渲染结果：

Answer 1

您的利润率正在下降。您可以将类添加到其主机，并删除其周围的div包装。可以使用@HostBinding();

组件：

import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'tabs-component',
  templateUrl: './tabs.component.html'
})
export class TabsComponent  {
 @HostBinding('class') classess = 'tabs is-medium'; 
}

HTML：

<ul>
  <li><a href="javascript:void(0);">Foo</a></li>
  <li><a href="javascript:void(0);">Foo</a></li>
</ul>