在 Mean Stack 中创建用户界面和获取数据

在前一节中，我们学习了如何向我们的项目中添加一个新组件。我们为 html 和 typescript 文件创建了一个单独的文件夹。在本节中，我们将学习事件侦听和输出内容。在本节中，我们将在我们的应用程序中使用这两种方法。我们将逐一获取这两种方法的知识。

事件

我们正在创建一个创建、更新和检索帖子的应用程序。因此，我们需要输入框和一个保存帖子的按钮。我们将两者都添加到帖子创建的模板中。我们可以使用普通的文本输入框或文本区域，因为我们应该能够在一行中输入更多文本。

现在，为了在点击时执行某些操作，我们需要添加一个点击监听器。我们将使用一个名为**事件绑定**的功能来完成此操作。**事件绑定**是一个 angular 功能，允许我们以声明方式侦听事件。因此，我们将在按钮中创建括号，并以下列方式调用 onAddPost() 函数

我们将在 PostCreateComponent 类中创建这个函数。在这个方法中，我们将创建一个警报消息，显示**“帖子已成功添加”**。

现在，我们将保存它并运行它。

输出内容

现在，我们将创建一个字段来显示输出。那时，我们将使用一些虚拟内容。因此，我们将在**PostCreateComponent**类的 **onAddPost()** 函数中设置虚拟内容，并且我们需要一个地方来存储该内容。我们将创建一个变量并传递一个空字符串。我们将以下列方式将这个变量覆盖到我们的 **onAddPost()** 函数中

现在，我们将回到我们的 html 文件，并将输出钩子直接添加到模板中。我们将通过使用一个名为**字符串插值**的功能来完成此操作，我们将在双花括号之间使用它。在这些花括号之间，我们将引用存储在我们 post-create 组件中的内容。这个东西可以是一个方法，然后我们将输出这个方法返回的任何东西，或者它可以是一个属性名，例如 **newPost**。

现在，如果我们运行它，我们将在浏览器上看到虚拟输出内容

现在，我们将一个字符串传递给 PostCreateComponent 类的 newPost 变量。当我们保存它时，我们将首先看到传递到 newPost 变量的字符串到输出字段。当我们点击按钮时，输出字符串将覆盖为传递到 onAddPost() 函数中的字符串。

获取用户输入

现在，我们将从文本区域获取用户输入。基本上有两种方法可以做到这一点，即本地引用和双向绑定。

本地引用

在本地引用中，我们向任何我们想要的 html 元素添加一个标记，一个变量。我们将通过添加一个井号，然后添加任何我们想要的名字来完成此操作。这个标记创建了对我们可以使用的元素的引用。我们将以下列方式为其编写代码

Post-create.component.html

我们还需要在 **post-create.component.ts** 文件中进行一些更改。我们将文本区域字段的标记传递给 onAddPost() 函数。我们将以下列方式更改 PostCreateComponent 类的 onAddPost() 函数

双向绑定

Angular 提供了一个名为双向绑定的新功能来获取用户的输入。无需手动设置文本区域的值并获取对其的引用。我们摆脱了两者。双向绑定结合了值的设置和读取。它被称为双向绑定，因为它具有双向流动。我们将使用 ngModel，它是一个指令，并监听用户输入。它会发出数据，并将新数据存储在该文本区域或输出中。

我们将创建一个新属性并将其与 ngModel 绑定。为了使用这个，我们将在 **app.module.ts** 文件中导入 FormsModule，它是 @angular/forms 的一部分。

我们不需要将任何标记传递给 onAddPost() 函数。

我们将删除标记和值，并将属性与 ngModel 绑定。在 textarea 中，我们在方括号之间附加了 ngModel，并传递了我们在 PostCreateComponent 类中创建的属性，如下所示

在下一节中，我们将把这个丑陋的应用程序变成一个看起来很酷的应用程序。我们将学习 angular material，如何安装它们并用于改进我们的应用程序。