Bulma CSS和子角度组件

Question

我决定将我的纯html部分转换为组件，并且一切正常，但是子组件不能具有其在 columns 引用内的引用。

这是我的代码，一切正常：

<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 进行封装，但是没有用，我的2列没有像以前那样对齐。有帮助吗？

Answer 1

.column元素必须是.columns的直接子元素才能起作用。使用表时可能会发生同样的问题。

这里有一些可能适用的解决方案。

在<div>上使用ngFor

您可以尝试在div元素上使用ngFor，然后将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>

尝试弄乱ng-container或自定义选择器（不建议使用）

在Fruit组件中，可以使用带括号的属性选择器，这意味着您可以将该组件作为属性放置在任何html标记中。不建议这样做，as you can check on the style guide。

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

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

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