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>

如何将这些语句用于更清洁，性能更好的角度应用中。

从free-code-camp附加参考文章， Best practices for a clean and performant Angular application

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模板中很难做到这一点，因为我们无法引入新变量。

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

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

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

我感觉他是在暗示模板中包含业务逻辑会使组件在更改模板时更容易出现错误，但这是一个愚蠢的论据，因为如果您移动业务逻辑< / em>移至您刚刚将其移至容易出现 bug 的位置的组件...

如何将这些语句用于更清洁，性能更好的角度应用中。

尝试使用与*ngIf相关的模板功能，而不是仅添加很多（如果有条件）。我在项目中看到的最少使用的功能是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的{{1}}功能来简化模板（与ngIf管道一起使用非常好）。

例如；

async

可以重写为：

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

如何在angular5中有效使用更多ngIf语句？

1 个答案: