Bulma CSS&child角分量

Question

我决定将我的普通html部分转换成一个组件，并且一切都正常工作，但是子组件不能具有引用，即它在列的引用中。

这里是我的代码，在这里一切都运行良好：

<div class="columns">
  <div class="column is-4">
    Fruits:
  </div>
  <div class="column is-2">apple</div>
  <div class="column is-2">orange</div>
  <div class="column is-2">pineapple</div>
  <div class="column is-2">banana</div>
</div>

但我决定在组件中转换一些html

如：

<div class="columns">
  <div class="column is-4">
    Fruits
  </div>
  <app-fruits>
    <div class="column is-2" *ngFor="let fruit of Fruits">
      {{fruit}}
    </div>
  <app-fruits>
</div>

我对app-fruits做了none封装，但没有工作，我的2列没有像以前那样对齐。有人帮忙吗？

Answer 1

.column元素必须是.columns的直接子元素才能工作。在处理表时也会出现同样的问题。

以下是一些可以应用的解决方案。

您可以尝试在div元素上使用ngFor，并将fruit变量传递给fruit组件，该组件作为fruit的@input装饰器。

<div class="columns">
  <div class="column is-4">
    Fruits
  </div>
  <div class="column is-2" *ngFor="let fruit of Fruits">
      <app-fruit-single [fruit]="fruit"></app-fruit-single>
  </div>
</div>

在Fruit组件中，您可以使用带括号的属性选择器，这意味着您可以将组件作为属性放在任何html标记中。这是不建议的，您可以查看样式指南。

@Component({
    selector: '[app-fruit-element]',
    ...
})

然后，您可以尝试将其与ng-container一起使用，但在创建没有DOM元素的组件时可能会遇到问题。

<ng-container *ngFor="let fruit of fruits" [fruit]="fruit" app-fruit-element></ng-container>