Question

我已经创建了一个引导卡响应列表，它将显示信息。卡当前由页面组件内的* ngIf创建。现在，我想将卡片项目移动到它自己的组件中。进行格式更改时。

我曾尝试将卡封装在自己的ng-container中（仍然可以正常工作），但这完全没有帮助。

我对使用组件的理解是，它应该像使用ng-container一样注入html代码，或者我错过了一个重点？

使用一个组件：

<div class="container">
  <div class="row">
    <div *ngFor="let device of devices" class="col-4 mb-4">
      <div class="card h-100">
        <div class="card-body">
          <p>some content</p>
        </div>
      </div>
    </div>
  </div>
</div>

分为多个部分：

页面组件（页面列表）：

<div class="container">
  <div class="row">
    <app-device-list-item></app-device-list-item>
    <app-device-list-item></app-device-list-item>
  </div>
</div>

设备组件（设备列表项）：

div class="col-4 mb-4">
  <div class="card h-100">
    <div class="card-body">
      some content
    </div>
  </div>
</div>

预期结果：设备在内部渲染时的渲染方式应与

实际结果：它们的渲染方式不同（请参见屏幕截图）

Answer 1

这里的问题是您提供给div的CSS类，其中包含*ngFor属性，即class="col-4 mb-4"类。您需要将这些类移到设备组件之外。

尝试将代码更改为以下内容

页面组件（页面列表）

<div class="container">
  <div class="row" *ngFor="let device of devices" class="col-4 mb-4">
    <app-device-list-item></app-device-list-item>
  </div>
</div>

设备组件（设备列表项）

<div class="card h-100">
  <div class="card-body">
    some content
  </div>
</div>

这是StackBlitz

上的有效示例

Answer 2

您的最终标记将如下所示，device-list-item组件的内容包装在<app-device-list-item>元素中，默认情况下浏览器将其视为<span>元素：

<div class="container">
  <div class="row">
    <app-device-list-item>
      <div class="col-4 mb-4">
        <div class="card h-100">
          <div class="card-body">
            some content
          </div>
        </div>
      </div>
    </app-device-list-item>
    <app-device-list-item>
      <div class="col-4 mb-4">
        <div class="card h-100">
          <div class="card-body">
            some content
          </div>
        </div>
      </div>
    </app-device-list-item>
  </div>
</div>

您必须在此包装元素（Angular术语中的主机）上应用col-4 mb-4 CSS类以应用所需的样式：

@Component({
  selector: 'app-device-list-item',
  ...
  host: {
    class: 'col-4 mb-4'
  }
})

将卡对象放入自己的组件后发生更改

2 个答案: