对于大多数相似但位置不同的组件,角度最佳实践是什么？

Question

我正在开发一个Angular 5 webapp,一个有点标准的社交媒体门户网站.它包含新闻提要,相册,活动列表等页面...

我需要添加一个名为"Groups"的功能.与任何社交网络组一样,某些用户可以加入该组.与其他人不同,群组的想法是群组成员获得自己的新闻提要,相册,活动列表等.

这意味着非组和组组件之间存在很多相似性,但它们并不完全相同(这里或那里有不同的按钮或div等).

我是Angular的新手但没有编码.这闻起来像是一种情况,我可以很容易地给自己一个糟糕的设计.如果我看一下传统的OOP,我可能会使用:

• 组成
• 遗产

过度:

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

对于这种情况,Angular最佳实践是什么,我的组件与其他组件类似,但根据"状态"(组与非组)不同？

NB目前,这些组件很可能要在不同的模块(集团为自身的模块),但如果这原来是一个坏主意,如果它使我在上面所讲的重用这可能会改变,例如难.

Answer 1

我不能说这是最佳实践，因为我也是 Angular2+ 的新手，但这对我来说一直有效，因为我在我的一个网络应用程序中遇到了类似的情况。

在您的.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>

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