在 MEAN Stack 中使用属性和事件绑定

在我们之前的章节中，我们了解了结构指令以及如何在应用程序或网站中使用结构指令。在本节中，我们将学习如何在 MEAN Stack 中使用属性和事件绑定来创建帖子。

我们将在代码中进行以下更改

1) 首先，我们需要在 post-create.component.html 中添加一个输入字段。 我们将以与创建文本区域相同的方式创建输入字段。 我们还将使用双向绑定为两个输入字段和文本区域提供标题。 因此，文本字段和文本区域的编码方式如下

在我们的 PostCreateComponent 类中，我们将按如下方式将 null 字符串传递给 enteredTitle 和 enteredContent 变量

2) 我们将通过创建一个新的 JavaScript 对象（即常量对象，使用 title 和 content 属性）来创建一个新帖子。 我们将使用 this 关键字来存储 title 和 content 数据，方式如下

3) 现在，我们将此帖子获取到另一个组件中。 因此，我们首先转到我们的 PostCreateComponent 类并发出我们自己的事件。 为此，我们需要 angular/core 提供的功能，即 EventEmitter。 之后，我们将添加一个新属性，即 postCreated，并使用 new 创建一个新的 EventEmitter。 我们可以为此属性提供任何名称。

之后，我们将转到我们的 onAddPost() 函数并使用 this 关键字调用 postCreated。 最后，我们将使用 emit() 函数来发出一个新事件。 在这个 emit() 函数中，我们将传递我们的 post 对象作为参数，完整的代码设计如下

4) 现在，为了监听它，我们首先必须让 angular 知道 postCreated 是一个事件，我们可以从外部进行监听。 我们将向 postCreated 属性添加装饰器，此装饰器的名称为 output。 我们将其导入并在如下方式中使用它

这个 @Output() 将 postCreated 变成一个事件，我们可以从外部监听，即在父组件中。

5) 现在，我们将转到 component.ts 文件，在这个文件中，我们将用新的 posts 属性覆盖 title。 实际上，此属性是一个空数组。 我们将创建一个 onPostAdded() 函数，该函数将获取 post 作为参数。 在此函数中，我们将按如下方式将此 post 推入 posts 列表中

6) 现在，我们将在我们的 component.html 文件中使用它。 在此组件中，我们使用选择器，我们使用事件绑定监听 postCreated，并按如下方式调用 onPostAdded() 函数

在上面的代码行中，$event 是一个变量，它使我们能够访问我们发出的数据。 它不仅适用于自定义事件，也适用于点击事件或任何内置事件。 在这里，我们还获得了默认的 dom 事件对象。

无论我们是传递还是获取事件，我们都可以使用特殊的 $event 变量访问它。

7) 现在，我们需要将其传递给 <app-post-list>。 我们必须通过属性绑定使 PostListComponent 类的 posts 属性可从外部绑定。 默认情况下，它不可绑定，我们将通过简单地向其添加装饰器，即 Input 来实现这一点，方式如下

现在，我们将使用 app.component.html 文件按如下方式将存储的帖子传递到列表中

angular 的更改检测将自动检测创建了什么新帖子。 现在，我们保存它，我们将有一个完整的链，如下所示