angular - 组件在角度 6 中自动更改其位置

Question

目前我正在开发角度应用程序。根据用户角色在仪表板中加载了超过 6 个组件。我使用 col 来拆分仪表板中的组件大小。问题是根据角色为用户隐藏了某些组件。如果删除了该组件空间仍然保持，它没有对齐。我想用当前可用的下一个组件替换空间。

仪表板.html：

<div class="row">
  <div class="col-lg-4">
    <app-date-update *ngIf="isAdminLogin"></app-date-update>
  </div>
  <div class="col-lg-4">
    <app-missing-alert></app-missing-alert>
  </div>
  <div class="col-lg-4">
    <app-answers></app-answers>
  </div>
</div>

<div class="row">
  <div class="col-lg-4">
    <app-due-date-alerts *ngIf="isPermittedRoleForDuedate"></app-due-date-alerts>
  </div>
</div>

如果 col 被拆分，那么在隐藏组件时仍然保持空间。如何在 html 或 angular 中实现这一点？

Answer 1

使用引导类无法实现此要求。这可以通过角度属性指令（ngStyle/ngClass/custom 指令）来实现。根据条件，需要将适当的类添加到 div 以决定它们的宽度。

希望这可以帮助。