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

Question

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

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

其实我想知道怎么做最好

Answer 1

在 angular 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 和 else 条件

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

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

Answer 3

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

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

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

Answer 4

您也可以在编译级别 更改模板和样式文件。由于环境变量，我们使用不同的模板和样式。对于大型项目，这种做法恰好对我们来说更清晰。

首先，我们向 environment.cs 文件中添加两个字段，例如：

export const environment = {
   production: false,

   componentTemplateFile: './tenants/tenant-name.html',
   componentStyleFile: './tenants/tenant-name.scss',

   ...
}

然后，在声明组件而不是使用内联字符串时，我们使用这些环境变量，例如：

@Component({
  selector: 'app-enroll-footer',
  templateUrl: environment.componentTemplateFile,
  styleUrls: [environment.componentStyleFile]
}) 
export class EnrollFooterComponent implements OnInit, OnDestroy {
...

最后，我们没有将文件添加到组件文件夹的根目录，而是有一个名为 tenants 的子文件夹，模板和样式文件位于其下，名称为在 environment.cs 文件中声明。

示例文件夹结构：

enroll-footer/
enroll-footer/enroll-footer.component.ts
enroll-footer/tenants/tenant-name.html
enroll-footer/tenants/tenant-name.scss
enroll-footer/tenants/other-tenant-name.html
enroll-footer/tenants/other-tenant-name.scss

当我们将环境变量（用于另一个配置）更改为 other-tenant-name 时，angular cli 在编译时基本上会使用这些文件。

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

how to best conditional template show in angular 4

angular-template

angular