Angular 中容器组件的文件结构

Question

我必须开发一个包含三个部分的布局组件：toolbar、sidebar 和 content:

它的三个部分中的每一个也是一个组件。

我的问题是我应该如何构建复合布局组件的文件。目前，我有这个结构：

app
│
├───content
│       content.component.html
│       content.component.less
│       content.component.spec.ts
│       content.component.ts
│
├───layout
│       layout.component.html
│       layout.component.less
│       layout.component.spec.ts
│       layout.component.ts
│
├───sidebar
│       sidebar.component.html
│       sidebar.component.less
│       sidebar.component.spec.ts
│       sidebar.component.ts
│
└───toolbar
        toolbar.component.html
        toolbar.component.less
        toolbar.component.spec.ts
        toolbar.component.ts

并且在阅读 Angular 的 style guide 之后，似乎平面结构比另一个更受欢迎：

app
│
│
└───layout
        layout.component.html
        layout.component.less
        layout.component.spec.ts
        layout.component.ts
            │
            │
            ├───content
            │       content.component.html
            │       content.component.less
            │       content.component.spec.ts
            │       content.component.ts
            │
            ├───sidebar
            │       sidebar.component.html
            │       sidebar.component.less
            │       sidebar.component.spec.ts
            │       sidebar.component.ts
            │
            └───toolbar
                    toolbar.component.html
                    toolbar.component.less
                    toolbar.component.spec.ts
                    toolbar.component.ts

但我认为第二个更有意义，因为我不打算在任何其他地方使用 toolbar、sidebar 和 content 组件。事实上，我什至不知道他们的名字是否应该加上layout字样（layout-toolbar、layout-sidebar和layout-content）。

在这种情况下，推荐的构建代码的方法是什么？

Answer 1

最终，这完全取决于您。从平坦开始，随着应用程序的增长，创建目录以保持一切井井有条。我也更喜欢你的第二种方法；将逻辑上等效的组件组合在一起。好文帮你结构：Angular Folder Structure

Angular 中容器组件的文件结构

File structure of a container component in Angular

web-component

angular