Question

我在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() {
    }

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

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

大多数时候，您的服务（在核心模块中）将消耗您的模型接口，而组件依次将仅通过该服务与建模数据进行通信。在较小的应用程序中，将数据模型接口放在Service文件的顶部最有意义。但是，随着您的应用程序变大，在某些情况下，组件需要数据模型接口而不是服务。

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

此article详细介绍了有关Angular 6应用程序的结构。

Answer 2

恕我直言最简单，最简单的解决方案是将其放在模型类上方的同一文件中。

arr=["$", "r", "t", "u", "v", "3", "!"]
  a=["abc", "bc"]
  slice.to_a=[["$"], ["r"], ["t", "u", "v"], ["3"], ["!"]]
  run=["$"]
  reject '$' because run.size=1 < 2
arr=["r", "t", "u", "v", "3", "!"]
  a=["abc", "bc"]
  slice.to_a=[["r"], ["t", "u", "v"], ["3"], ["!"]]
  run=["r"]
  reject 'r' because run.size=1 < 2
arr=["t", "u", "v", "3", "!"]
  a=["abc", "bc"]
  slice.to_a=[["t", "u", "v"], ["3"], ["!"]]
  run=["t", "u", "v"]
  run.join=tuv
arr=["u", "v", "3", "!"]
  a=["abc", "bc", "tuv"]
  slice.to_a=[["u", "v"], ["3"], ["!"]]
  run=["u", "v"]
  run.join=uv
arr=["v", "3", "!"]
  a=["abc", "bc", "tuv", "uv"]
  slice.to_a=[["v"], ["3"], ["!"]]
  run=["v"]
  reject 'v' because run.size=1 < 2
arr=["3", "!"]
  a=["abc", "bc", "tuv", "uv"]
  slice.to_a=[["3"], ["!"]]
  run=["3"]
  reject '3' because run.size=1 < 2
arr=["!"]
  #=> ["abc", "bc", "tuv", "uv"]

编辑：至于文件夹结构：

interface ProductJson {
   id: number;
   name: string;
   price: number;
}

export class Product{
    constructor(private id:number,
                private name:String,
                private price:number){}


    public static fromJson(productJson : ProductJson ) : Product {
           //
    }
}

等。

这就是我的所作所为。

Answer 3

我认为这是个人喜好。我发现将某些接口保留在全局共享目录中并将其中一些保留在模块目录中是可行的。例如，“ core / models / core.models.ts”中的全局变量，以及“ modules / home / home.models.ts”中的特定变量。

在哪里放置接口和类型别名

3 个答案: