在 MEAN Stack 中添加新组件

在我们之前的章节中，我们了解了 MEAN 栈的项目结构。现在，我们知道了项目中所有可用的文件和文件夹。在本节中，我们将使用相同的项目，并构建一个应用程序，用户可以在其中创建帖子、阅读其他人的帖子、编辑他们自己的帖子等等。

注意：我们当然不希望只在一个组件中处理所有逻辑，因为这会很快变得庞大。

创建一个新组件

我们将通过进入 app 文件夹来创建一个新组件。在这个文件夹中，我们管理我们的 Angular 应用程序。我们将使用以下步骤创建一个新组件

1) 我们将在 app 文件夹中创建一个子文件夹，我们通常将新组件或组件块放在其中以保持代码的组织性。我们将通过简单地单击鼠标右键在 app 文件夹上来创建一个名为“posts”的新子文件夹。

这个子文件夹将包含所有与帖子相关的组件，并且每个组件通常由多个文件组成。

2) 现在，我们将创建另一个子文件夹来组织单个组件的文件。你也可以使用更扁平的文件夹结构，并且你不需要使用那么多文件夹，这取决于你。我们将在我们的项目中使用子文件夹的方式。

3) 现在，在这个文件夹中，我们将创建一个post-create.component.ts。我们可以给这个文件起任何名字，但在 Angular 中将 .component 包含在组件文件中，并且 .ts 是一个扩展名，因为我们使用 typescript 是一种约定。

4) 我们可以将 html 模板定义在 typescript 文件中，但是由于我们有一个更复杂的模板。所以，创建一个单独的文件是好的。我们将创建一个 html 文件名post-create.component.html。

5) 在我们的 typescript 文件中，我们通过简单地创建一个新类来创建一个组件。类是 typescript 的一个特性，在最新的 JavaScript 版本中也可用。它允许我们为对象创建一个蓝图。虽然，我们永远不会自己创建该组件对象。我们只是把它给 Angular，Angular 会实例化它、创建它并使用它。

我们只能定义这样的组件应该是什么样子，这包括它的名称。

在上面的代码中，

1. 我们在代码底部创建了一个类 PostCreateComponent。
2. 我们通过向其添加一个装饰器（@Component()）将其转换为一个组件。这是因为 Angular 可以理解它是什么。
3. 组件装饰器以 JavaScript 对象的形式接受一些配置。所以，我们将模板定义为一个对象。本质上，我们在代码中传递了模板的 URL。
4. 我们还在组件中添加了一个选择器。选择器允许我们使用该组件。

6) 我们还想向模板添加一些内容。我们将在我们的post-create.component.html中编写 html 代码

7) 现在，我们将在 app.component.html 文件中使用它。我们将转到该文件并使用选择器调用我们的组件。

8) 如果我们保存它并运行我们的应用程序，我们将看到一个空白屏幕。它将向我们显示一条错误消息“app-post-create 不是一个已知元素”。如果我们要使用它，我们必须显式地注册一个组件。我们将在 app.module.ts 文件中执行此操作。所以，我们将导入我们的组件并将其添加到声明中，如下所示

现在，我们保存它，并且可以在浏览器中看到“post create component”。