时间戳

首页 > 解决方案 > Bulma CSS & 子角度组件

angular - Bulma CSS & 子角度组件

问题描述

我决定将我的纯 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 列没有像以前那样对齐。有什么帮助吗？

标签： angularbulma

解决方案

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

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

使用 ngFor<div>

您可以尝试在 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 标记中。不建议这样做，因为您可以查看样式指南。

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

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

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

推荐阅读