Question

我正在使用Angular 5网络应用程序，这是一个有点标准的社交媒体门户。它包含新闻提要，相册，事件列表等页面。

我需要添加一个称为“群组”的功能。像任何社交网络组一样，某些用户可以加入该组。与其他小组不同，小组的想法是小组成员获得自己的新闻提要，相册，事件列表等。

这意味着非组和组组件之间有很多相似之处，但是它们并不完全相同（这里或那里的按钮或div不同，等等）。

我是Angular的新手，但不是编码人员。这闻起来像是一种情况，在这种情况下，我可能会因设计不好而轻易地使自己陷入困境。如果我看传统的OOP，我可能会使用以下任何一种方法：

组成
继承

结束：

将“ is_groups”参数传递给我的组件并用if语句填充它
复制和粘贴我的层次结构的大部分内容

在这种情况下，我的Angular最佳实践是什么？我的组件与其他组件相似，但基于“状态”（组与非组）有所不同？

NB目前，这些组件可能将位于不同的模块（组是其自己的模块）中，但是如果这不是一个好主意，例如，如果它可以重用，则可能会改变我说的是困难之上。

Answer 1

我不能说这是最佳实践，因为我也是Angular2 +的新手，但是这对我一直有效，因为我的一个Web应用程序中也有类似的案例。

在您的 .ts 文件中，我将所需的状态添加为布尔值：

    state1 = false;
    state2 = false;
    state3 = false;

在您的 .html 文件中，将此状态绑定到结构化指令以根据状态显示。我在大多数情况下都将 ng-container 与 * ngIf 一起使用，因为如果不满足条件， ng-container 不会呈现。考虑到这一点，您可以选择将所需的所有内容放置在这些 ng-container 之间，而无需进行渲染。对于此示例，将根据您的状态显示一个按钮。

    <ng-container *ngIf="state1">
         <button (click)="function1()"> Bonuses </button>
        <!-- <div> </div> --> // Anything could go here !
    </ng-container>

    <ng-container *ngIf="state2">
         <button (click)="function2()"> Elite Bonuses </button>
         <!-- <div> </div> --> // Anything could go here !
    </ng-container>

    <ng-container *ngIf="state3">
         <button (click)="function3()"> Supreme Bonuses</button>
         <!-- <div> </div> --> // Anything could go here !
    </ng-container>

当然，您需要一种逻辑来切换状态，但这取决于您打算如何传递这些状态（例如服务）或您更喜欢哪种状态。

对于大多数相似但位置不同的组件，Angular的最佳做法是什么？

1 个答案: