Question

目前，我练习角度4. 当普通用户查看此时显示公共内容当A注册用户进入网页然后显示编辑或某些内容。如何最佳实践显示有条件的模板或一些Html内容示例：

<div *ngIf="isUser">
    some Content  here......
</div>
<div *ngIf="!isUser">
    some Content here .....
</div>

实际上，我想知道如何做到最好。

Answer 1

在角度4中，您可以使用if .. else ..结构用于html模板

您可以这样使用它：

<div *ngIf="isUser; else otherContent">
    some Content  here......
</div>
<ng-template #otherContent>
    <div>
        some Content here .....
    </div>
</ng-template>

但在你的情况下，最漂亮的解决方案将是......然后......其他......有条件的

<ng-container *ngIf="isUser; then someContent else otherContent"></ng-container>

<ng-template #someContent ><div>some content...</div></ng-template>
<ng-template #otherContent ><div>other content...</div></ng-template>

Answer 2

NgIf是structural directive。这意味着当表达式变为false时，您的组件将被销毁。

因此，如果您的组件经常被销毁并再次创建，那么这可能是一个问题。在这种情况下，应考虑[hidden]指令。它只设置display:none。在这种情况下，您的组件不会被销毁。

<div [hidden]="expression">{{val}}</div>

Answer 3

将NgIf与其他条件

一起使用

<div *ngIf="isUser;else Other">
    some Content  here......
</div>

<ng-template #Other> some Content here .....</ng-template>

如何在角度4中显示最佳条件模板

3 个答案: