放入自己的组件后卡片对象发生变化

Question

我已经创建了一个包含 bootstrap 卡片的响应列表，这些卡片将显示信息。这些卡片当前由页面组件内的 *ngIf 创建。现在我想将卡片项目移动到它自己的组件中。执行此操作时格式会更改。

我试过将卡片封装在它们自己的 ng-container 中（仍然可以正常工作），但这对我一点帮助都没有。

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

Screenshot

在一个组件中工作：

<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" 类。您需要将这些类移到设备组件之外。

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

页面组件(page-list)

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

设备组件（device-list-item）

<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'
  }
})

放入自己的组件后卡片对象发生变化

card object changes after putting inside a own component

angular-components

angular