angular – 放置接口和类型别名的位置

发布时间：2020-12-17 17:27:36 所属栏目：安全来源：网络整理

导读：我在angular2项目中使用自定义接口并输入别名.例如,我正在实现一个显示产品列表的组件,所以我需要定义Product接口： export interface Product { id: number; name: string; price: number;} 现在我需要一个放置接口的地方.我认为它应该在组件文件夹中.我也

我在angular2项目中使用自定义接口并输入别名.例如,我正在实现一个显示产品列表的组件,所以我需要定义Product接口：

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

现在我需要一个放置接口的地方.我认为它应该在组件文件夹中.我也偷看了源代码,而angular似乎将所有接口都放入了facade文件夹中.所以我最终得到了以下结构：

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

界面使用如下：

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

    constructor() {
    }

这是一种可行的方法吗？是否有针对相关问题的样式指南？

解决方法

我也在努力解决这个问题.首先要理解的是,目录结构对于您的用例和项目复杂性是非常主观的.也就是说,官方文档有一些很好的入门指南：

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

大多数情况下,您的服务(在Core模块中)将使用您的模型接口,而您的组件将仅通过服务与建模数据进行通信.在较小的应用程序中,将数据模型接口放在Service文件的顶部是最有意义的.但是,随着应用程序变得越来越大,将会出现组件需要数据模型接口而不是服务的情况.

保持数据模型接口提供最可持续的方法,提供最佳的“关注点分离”和抽象.

这篇article详细介绍了构建Angular 6应用程序的细节.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!