使用 Mean Stack 创建扩展面板

在上一节中，我们学习了如何使用 Angular Material 在 MEAN 堆栈中创建工具栏。 现在，我们将输出帖子，并将学习如何使用 Angular Material 的 扩展 组件创建扩展面板。 我们将使用以下步骤在我们的应用程序中创建扩展面板

1) 我们将为此创建一个新的组件，因为输出帖子与创建帖子是分开的。 因此，在 posts 文件夹中，我们将创建一个名为 post-list 的新子文件夹。

2) 在这个 post-list 子文件夹中，我们将添加一个 post-list.component.ts 文件和 post-list.component.html

3) 我们将创建一个组件。 如果你不知道如何创建一个组件，请阅读 在 MEAN 堆栈中添加新组件 的链接。

4) 我们知道，我们必须将其包含在 module.ts 文件中。 我们将组件添加到 declaration 数组中，并以以下方式将其添加到 ngModule 中

5) 现在，我们将在我们的 component.ts 文件中使用它。 我们将以以下方式将其添加到 app-post-create 下面的 main 部分中

6) 我们的目标是在其中渲染帖子列表。 因此，我们将返回到我们的 post-create 组件，并删除我们在应用程序之前创建的丑陋段落。

7) 我们将使用 Angular Material 的另一个特性，即 扩展面板，这是一个可折叠的面板，我们可以在其中显示一些内容。 因此，我们将返回到我们的 app module，并从 Angular Material 导入一个额外的模块，即 MatExpansionModule，并将其添加到 import 数组中。

8) 我们将在 post-list.component.html 中使用此类组件。 因此，我们将使用以下代码行来创建扩展面板

在上面的代码中，我们使用 < mat-expansion-panel-header></mat-expansion-panel-header> 元素为扩展面板创建了一个标题。 但是，如果我们保存它并运行它，我们不会在浏览器上看到扩展面板，因为我们需要用 <mat-accordion> 包装器将其包装起来。 所以，

当我们保存它时，我们将在浏览器上看到一个扩展面板，如下所示

9) 在这里，扩展面板直接放置在卡片下方，这看起来不太漂亮。 所以，我们将限制它的宽度。 我们需要限制输入和扩展面板的宽度。 因此，我们将限制总主要内容的宽度。 我们将转到 post-create.component.css 文件，然后从那里删除 mat-card 的 CSS 代码。 之后，我们将转到 component.css 文件，并将宽度设置为 80%，并将边距设置为自动，如下所示

当我们保存它时，我们将看到扩展面板的漂亮视图。

10) 现在，我们将在我们的 post-list 组件和 post-create 组件之间创建一些间距。 我们有多种实现方法，一个简单的方法是向我们的 post-list 组件添加一个 margin-top。 为此，我们将创建一个 post-list.component.css 文件，并将其导入到我们的 post-list.component.ts 文件中。

11) 现在，我们将在 post-list.component.css 中编写 CSS 代码。 我们将使用一个名为 host 的特殊选择器，它指向元素本身。 我们还需要首先将 display 设置为 block，因为默认情况下，所有元素都不会被视为块级元素。 我们将以以下方式编写 CSS 代码

我们将保存它，并在扩展面板项目中看到间距，如下所示