在 MEAN Stack 中创建模型

在上一节中，我们学习了属性和事件绑定。我们得到了一个工作链，我们在其中添加了一个新帖子并将其输出到展开面板中。在本节中，我们将优化我们的代码。

在我们的代码中，我们在不同的地方使用了帖子。我们确保它们具有相同的结构、标题和内容，并且我们在创建它们时就完成了此操作。我们在输出它们时依赖于此结构。

在 app.component.ts 文件中，我们有一个数组，我们可以在这里存储任何东西。我们可以在此数组中存储一个数字。几周或几个月后，如果我们返回到我们的应用程序，我们可能很难立即弄清楚我们在其中存储了哪种数据，帖子内容还是帖子描述。现在，为了有意义，我们将创建一些模型，这些模型是蓝图或对比定义了帖子在我们的 angular 应用程序中的外观。我们将按照以下步骤在我们的应用程序中创建一个模型

1) 我们将在我们的 posts 文件夹中创建一个新文件，而不是一个文件夹，并将其命名为 model.ts。此文件将用于为我们的帖子创建一个模型。

2) 在此文件中，我们将使用另一个名为接口的 typescript 功能。接口就像一个定义对象外观的类。接口不能被实例化，它更像是一个契约。我们使用它来创建我们自己的类型，以强制某个对象看起来像这样。

我们为接口定义字段和方法。我们定义一个标题字段和一个内容字段，它们应该属于字符串类型，并且此接口以以下方式编码

它定义了帖子在我们的应用程序中的外观的清晰定义。在上面的代码行中，我们使用了 export，因为我们还将在其他组件中使用它。

3) 现在，我们将返回到我们的 component.ts 文件，并从 post.model.ts 文件中导入 Post 接口。现在，我们将通过简单地添加冒号，然后在以下方式添加 post [] 来创建类型为 Post 的 Storedpost 数组

4) 我们还将返回到我们的 post-list.component.ts 文件，在这里我们对帖子列表也做同样的事情。我们将以下列方式创建类型为 Post 的帖子列表

5) 我们还将返回到我们的 post-create.component.ts 文件并导入 post。当^我们创建一个帖子时，它应该属于类型 Post。因此，我们将创建一个类型为 Post 的常量 post 属性。我们还需要将 Post 类型定义到我们的发射器中，因为我们需要定义将要发射的数据属于 Post 类型。因此，整个内容以以下方式编码

在下一节中，我们将学习关于表单以及如何在我们的应用程序中添加表单。