如何在 Angular5 中高效使用更多 ngIf 语句？

Question

我是 Angular 开发的初学者。现在在我的组件中使用 *ngIf 语句。

在搜索时，我发现建议不要在 *ngIf 语句中使用逻辑的文章。

示例1：

<user-component *ngIf="role==='user'"></user-component><guest-component *ngIf="role==='guest'"></guest-component> and so on

示例2：

<div [ngSwitch]="typeOfUser"><user-component *ngSwitchCase="user"></user-component><guest-component *ngSwitchCase="guest"></guest-component><default-component *ngSwitchDefault></default-component></div>

我如何使用这些语句来实现更清洁和高性能的角度应用程序。

附上免费代码营的参考文章， 干净且高性能的 Angular 应用程序的最佳实践

Answer 1

在搜索时，我发现建议不要在 *ngIf 语句中使用逻辑的文章。

我理解本文作者的动机，但我必须警告您，标题为“避免模板中的逻辑”的特定部分是措辞不当的建议。

https://medium.com/free-code-camp/best-practices-for-a-clean-and-performant-angular-application-288e7b39eb6f

如果模板中有任何类型的逻辑，即使它是一个简单的 && 子句，最好将其提取到其组件中。

这并不完全正确。

我不想维护由经常这样做的人开发的任何组件。它们的组件会因属性而变得臃肿，并且您将不断地在 HTML 文件和 TypeScript 源代码之间来回切换，以弄清楚业务逻辑到底是什么。

但是，该建议很有价值，因为它基于一般源代码的经过验证的实践。这是一种与任何特定编程语言无关的实践，它与一般的if 语句问题有关。

例如;

    if(x > 1920 && y < 4 && p !== 'expand') {
         // do work
    } else {
         // do work
    }

在上面的例子中，逻辑条件是无法理解的。该表达式包含无法识别的变量、神奇的文字值和多个条件。我们还可以在 Angular 模板中看到类似的内容*ngIf="x > 1920 && y < 4 && p !== 'expand'"：

推荐的方法是不要编写这样的条件，而是将表达式分解为人类可读的术语来解释业务逻辑。

例如;

    const max_screen_size = 1920;
    const min_device_count = 4;
    const expanded_mode = 'expand';

    const valid_screen = screen_size > max_screen_size && device_count < min_device_count;
    const valid_mode = mode !== expanded_mode;

    if(valid_screen && valid_mode) {
       // do work
    } else {
       // do work 
    }

上面的方法适用于大多数编程语言，但这在 Angular 模板中很难做到，因为我们无法引入新变量。

所以我认为作者建议您在组件中引入新的属性，以使模板中的业务逻辑更易于阅读和维护。

模板中包含逻辑意味着无法对其进行单元测试，因此在更改模板代码时更容易出现错误。

现在那是完全错误的。您绝对可以在 Angular 中对模板进行单元测试。您可以测试内容、条件和结构。我不知道他在这里指的是什么。

我觉得他暗示在模板中包含业务逻辑会使组件在更改模板时更容易出现错误，但这是一个愚蠢的论点，因为如果您将业务逻辑移动到刚刚移动到容易出现错误的组件中。 。

我如何使用这些语句来实现更清洁和高性能的角度应用程序。

尝试使用相关的模板功能，*ngIf而不是仅仅添加许多if 条件。我在项目中看到最少使用的功能是条件else。

例如;

    <div *ngIf="user_role === 'admin'>
         Admin features
    </div>
    <div *ngIf="user_role !== 'admin'>
         General features
    </div>

上面是一个问题，因为如果业务规则发生变化，你现在必须更改两个地方。请改用else条件。

例如;

    <div *ngIf="user_role === 'admin; else general'>
         Admin features
    </div>
    <ng-template #general>
         General features
    </ng-template>

现在上面只有一个条件，如果你必须改变它，你就不会错误地错过第二个条件。

另外，使用as的功能ngIf来简化您的模板（与管道配合使用效果很好async）。

例如;

   <div *ngIf="data.user.permission">
        <span>{{data.user.permission.title}}</span>
        <span>{{data.user.permission.code}}</span>
   </div>

可以重写为：

   <div *ngIf="data.user.permission as perm">
        <span>{{perm.title}}</span>
        <span>{{perm.code}}</span>
   </div>