创建一个模态框

我们还有一个页面需要添加内容，即联系页面。该页面应包含一个表单，当表单提交时，会弹出一个模态框。我们可以使用 Bootstrap 来帮助我们进行表单和模态框的样式设计。

创建模态框组件

我们将创建一个组件来容纳模态框。在命令行中运行以下命令：

1ng generate component contact/modal

我们修改模板文件以包含模态框内容。在 modal.component.html 文件中添加以下代码：

1<div class="modal show">
2  <div class="modal-dialog">
3    <div class="modal-content">
4      <div class="modal-header">
5        <h5 class="modal-title">表单已提交</h5>
6        <button type="button" class="close"><span>&times;</span></button>
7      </div>
8      <div class="modal-body">
9        <p>我们会尽快回复！</p>
10      </div>
11      <div class="modal-footer">
12        <button type="button" class="btn btn-secondary">关闭</button>
13      </div>
14    </div>
15  </div>
16</div>
17<div class="modal-backdrop fade show"></div>

这个模板目前没有特别之处，还没有任何绑定。随着开发的推进，我们会逐步添加这些功能。接下来，我们需要加载模态框。

在 contact-main.component.html 文件中添加以下内容：

1<form>
2  <div class="form-group">
3    <label>邮箱</label>
4    <input type="text" class="form-control">
5  </div>
6  <div class="form-group">
7    <label>主题</label>
8    <input type="text" class="form-control">
9  </div>
10  <div class="form-group">
11    <label>消息</label>
12    <textarea class="form-control"></textarea>
13  </div>
14  <button type="submit" class="btn btn-primary">提交</button>
15</form>
16
17<app-modal></app-modal>

这里我们有一个表单，在底部加载了模态框。由于 Bootstrap 的 CSS 默认会隐藏模态框，因此它不会显示出来。我们需要覆盖默认样式使其可见。在 modal.component.css 文件中添加以下内容：

1.modal.show {
2  display: block;
3}
4
5.modal-backdrop.show {
6  opacity: .5;
7}

页面准备工作已完成。以下是更新后的完整代码。当我们导航到联系页面时，模态框将立即显示。在接下来的几节课中，我们将进一步完善模态框的功能，提升其可复用性。