angular - 在哪里放置接口(interface)和类型别名

Question

我在我的 angular2 项目中使用自定义接口(interface)和类型别名。例如，我正在实现一个显示产品列表的组件，因此我需要定义 Product 接口(interface):

export interface Product {
    id: number;
    name: string;
    price: number;
}

现在我需要一个地方来放置接口(interface)。我认为它应该在组件文件夹中。我还查看了源代码，angular 似乎将所有接口(interface)都放入了 facade 文件夹中。所以我最终得到了以下结构:

components
|
|--- product-list
     |
     |--- facade
     |    |
     |    |--- product.ts
     |
     |--- product-list.component.ts
     |--- product-list.component.html
     |--- product-list.component.css

接口(interface)是这样使用的:

export class RowComponent implements OnInit {
    @Input() product: Product;
    @Output() productRemoved: EventEmitter<ProductRemoved> = new EventEmitter();

    constructor() {
    }

这是可行的方法吗？是否有针对所讨论问题的任何样式指南？

Answer 1

我也遇到过这个问题。首先要了解的是，目录结构在您的用例和项目复杂性方面非常主观。也就是说，官方文档有一些很好的入门指南:

https://angular.io/guide/styleguide#style-04-06

我对大中型应用程序使用以下结构:

|-- app
     |-- modules
       |-- home
           |-- [+] components
           |-- [+] pages
           |-- home-routing.module.ts
           |-- home.module.ts
     |-- core
       |-- [+] authentication
       |-- [+] footer
       |-- [+] guards
       |-- [+] mocks
       |-- [+] models // <- here
       |-- [+] validators
       |-- [+] services
       |-- core.module.ts
       |-- ensureModuleLoadedOnceGuard.ts
       |-- logger.service.ts
     |
     |-- shared
          |-- [+] components
          |-- [+] directives
          |-- [+] pipes
     |
     |-- [+] configs
|-- assets
     |-- scss
          |-- [+] partials
          |-- _base.scss
          |-- styles.scss

大多数时候，您的服务(在核心模块中)将使用您的模型接口(interface)，而您的组件反过来将仅通过该服务与建模数据通信。在较小的应用程序中，将数据模型接口(interface)放在服务文件的顶部最有意义。但是，随着您的应用程序变得越来越大，在某些情况下组件需要数据模型接口(interface)而不是服务。

保留数据模型接口(interface)提供了最可持续的方法，提供了最好的“关注点分离”和抽象。

这article详细介绍了构建 Angular 6 应用程序。