Question

我具有以下Angular 6组件来编辑帖子：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'post-edit',
  templateUrl: './post-edit.component.html',
  styleUrls: ['./post-edit.component.less']
})

export class PostEditComponent implements OnInit {

  @Input() id: number;
  title: string;
  content: string;
  categoryId: number;

  categories: Array<{ id: number, name: string }>;

  constructor() { }

  ngOnInit() {
  }

}

调用API获取具有postId的帖子的数据时，它返回：

{
  "data": [
    {
      "postId": 1,
      "title": "post title",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "categoryId": 2,
      "created_at": "2018-10-20 10:14:23"
    }
  ]
}

所以我在Angular中创建了一个PostService，如下所示：

@Injectable()
export class PostService {

  constructor(private http: Http) { }

  public get() { }

  public create(post) { }

  public getById(id: number) { }

}

问题1

我应该按如下方式为每个组件（编辑，列表，创建等）定义模型吗？

export class PostEditModel {
  id: number;
  title: string;
  content: string;
  categoryId: number;
}

问题2

应该将包含类别列表以显示在HTML“选择”上的categories变量包含在PostEditModel中还是直接包含在组件中？

问题3

PostEditComponent或PostEditModel中的Post属性小于API返回的属性（例如：created_at）。

每种服务方法都应该有自己的模型吗？例如：

public getById(id: number) { }

将返回一个PostServiceGetApiModel，当PostEditComponent调用它时，它将被映射到PostEditModel。

进行此映射的最佳方法是什么？

基本上，我正在尝试为需要能够扩展的应用程序找到最佳解决方案...

Answer 1

答案1

不。仅具有可选字段的单个模型就足够了。例如，在添加模型中，如果ID是在线生成的，则不会有ID。因此模型可以是：

export interface Post {
  id?: number;
  title: string;
  content: string;
  categoryId: number;
}

请注意，我将Angular suggests数据模型声明为interface而不是class作为接口而不是类。

考虑将接口用于数据模型。

答案2

我认为categoryId已包含在模型中。因此，我不确定是否需要在其中添加类别。

但是，我建议您为类别创建一个enum，只是为了在您分配或使用enum的位置进行一些强类型化。

答案3

我认为答案1 也回答了这一问题。帖子模型可以包含与任何帖子的CRUD操作中存在的帖子相关的所有字段。因此，如果在CRUD的所有阶段都存在某些内容，则只需将其保留为强制性，并将其保留为可选。因此created_at是可选的

Answer 2

答案1

每个组件一个模型。无论您现在用于 Post 模块的任何文件都很好。

每个模块应具有以下文件： - 零件 -服务 -型号 -模块 -路线

答案2

否。

类别，我相信这是您在添加/编辑帖子时从中选择单个/多个类别的列表。它应该仅在Post组件中。我也认为它应该来自服务-后端，因此无需维护前端列表中的更改。

答案3

不。

我认为我们已经在答案1 中对此进行了介绍。

建议

除了您的问题之外=最好仅创建同时包含这两个内容的PostComponent PostEditComponent或PostAddComponent。您可以使用Angular轻松处理它。您只需要检查路径中的参数即可。

如何在Angular应用程序中构造模型和服务？

2 个答案: