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

我是一个角度发展的初学者。现在在我的组件中使用*ngIf语句

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

例1：

等等

例2：

如何将这些语句用于更干净、更高性能的角度应用程序

附上免费代码营的参考文章，

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

我理解这篇文章的作者的动机，但我必须警告你，这篇题为“模板中的避免逻辑”的特别章节措辞拙劣

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

这并不完全正确

我不愿意维护由一个经常这样做的人开发的任何组件。它们的组件中会有大量的属性，您会不断地在HTML文件和TypeScript源代码之间来回切换，以了解业务逻辑到底是什么

但是，这个建议是有价值的，因为它是基于一般的源代码实践的。这是一种与任何特定编程语言无关的实践，它通常涉及if语句的问题

比如,

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

    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 
    }

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

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

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

以上是一个问题，因为如果业务规则发生变化，您现在必须更改两个位置。改用else条件

比如,

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

    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 
    }

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

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

   <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>

---

第一种情况可以简化为*ngIf=role！='我发现一些文章建议不要在*ngIf语句中使用逻辑：并不是一切都与性能有关。他们可能会给出这样的建议，因为这会降低代码的可读性、可测试性，并促进代码复制。如果您认为您的代码可读性足够，那么它就非常好，不会导致任何性能问题。无论如何，你不应该预先优化。顺便说一句，你链接的文章解释了这一点：*为什么？在模板中包含逻辑意味着不可能对其进行单元测试，因此在更改模板代码时更容易出现错误。。看，与性能无关。顺便说一句，它还提供了一个示例，展示了如何重构代码。你读过吗？是的，我读过这篇文章，但是在我的组件中使用ngIf语句有点困惑。如果假设，我在父组件中有10个子组件。我可以在一个组件中编写多个ngIf语句，正如文章所建议的，我们将无法对其进行单元测试。那么，如何在不使用*ngIf语句的情况下使用子组件呢。