构建 DOM 的最佳方式是什么？

【问题标题】：What's the best way to structure the DOM?构建 DOM 的最佳方式是什么？
【发布时间】：2022-01-19 07:06:35
【问题描述】：

当我将块样式设置为 ng-template 时，我的 class="icon d-none d-sm-block" 不起作用。

如何解决？

<div class="icon d-none d-sm-block" *ngIf="user; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>
    <fa-icon [icon]='["fas", "user-alt"]' class="text-primary mr-1"></fa-icon>
    <button class="btn btn-outline-primary mr-2 btn-sm auth-btn">Logout</button>
</ng-template>
<ng-template #elseBlock>
    <button class="btn btn-outline-primary mr-2 btn-sm auth-btn">Login</button>
</ng-template>

【问题讨论】：

标签： angular bootstrap-4

【解决方案1】：

这里的问题是，当使用 then 和 else 条件时，整个 div 会被重新调整。

也许可以试试这样的：

<div class="icon d-none d-sm-block">
 <ng-container *ngIf="user; then thenBlock else elseBlock"></ng-container>
</div>

<ng-template #thenBlock>
    <fa-icon [icon]='["fas", "user-alt"]' class="text-primary mr-1"></fa-icon>
    <button class="btn btn-outline-primary mr-2 btn-sm auth-btn">Logout</button>
</ng-template>
<ng-template #elseBlock>
    <button class="btn btn-outline-primary mr-2 btn-sm auth-btn">Login</button>
</ng-template>

然后一切都应该在div中正确渲染

【讨论】：