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

Question

当我将块样式设置为 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>

Answer 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

中正确呈现

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

What's the best way to structure the DOM?

bootstrap-4

angular