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 做了 encapsulation none，但没有工作，我的 2 列没有像以前那样对齐。有什么帮助吗？

Answer 1

.column 元素必须是 .columns 的直接子元素才能正常工作。使用表格时可能会出现同样的问题。

这里有一些可以应用的解决方案。

在<div> 上使用 ngFor

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

<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>