Angular 5中复用HTML内容：通过Service调用Bootstrap模态框

嗨，作为Angular 5的新手，你的这个复用模态框的想法特别实用！下面我一步步教你实现这个需求，不用在每个组件里重复写模态框HTML，只需调用Service方法就能唤起它：

第一步：准备工作 - 确保Bootstrap和jQuery已正确引入 #

因为Bootstrap的模态框依赖jQuery，所以先确认这两个库已经添加到你的项目中：

1. 安装依赖（如果还没装）：

npm install jquery bootstrap --save

2. 在angular.json（Angular 5可能是.angular-cli.json）的scripts和styles数组里添加对应的文件：

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

第二步：创建全局模态框组件 #

我们先把模态框封装成一个独立组件，这样可以复用它的HTML：

1. 生成模态框组件：

ng generate component modal

2. 修改modal.component.html，把你提供的模态框代码放进去，注意给最外层的模态框div加上模板引用变量#myModal：

<!-- Modal -->
<div #myModal class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

3. 在modal.component.ts里添加控制模态框显示/隐藏的方法，通过ViewChild获取模态框元素：

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { ModalService } from '../modal.service';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
  @ViewChild('myModal') modalElement: ElementRef;

  constructor(private modalService: ModalService) {}

  ngOnInit() {
    // 订阅Service的显示事件
    this.modalService.modalShow$.subscribe(() => {
      this.showModal();
    });
  }

  private showModal() {
    // 调用Bootstrap的modal方法显示
    $(this.modalElement.nativeElement).modal('show');
  }
}

第三步：创建ModalService来控制模态框 #

接下来写Service，作为各个组件和模态框之间的通信桥梁：

1. 生成Service：

ng generate service modal

2. 在modal.service.ts里用RxJS的Subject来发送显示模态框的指令：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable({
  providedIn: 'root'
})
export class ModalService {
  // 创建一个Subject来传递显示事件
  private modalShowSubject = new Subject<void>();
  // 对外暴露可观察对象，供组件订阅
  modalShow$ = this.modalShowSubject.asObservable();

  // 你想要的generatePopup方法，调用它就会触发模态框显示
  generatePopup() {
    this.modalShowSubject.next();
  }
}

第四步：在全局引入模态框组件 #

把模态框组件放到根组件（比如app.component.html）里，这样它会一直存在于DOM中，默认是隐藏的：

<!-- app.component.html -->
<app-modal></app-modal>

<!-- 其他根组件内容 -->
<router-outlet></router-outlet>

第五步：在任意组件中调用Service弹出模态框 #

现在你可以在任何需要的组件里，注入ModalService并调用generatePopup方法：
比如创建一个测试组件：

import { Component } from '@angular/core';
import { ModalService } from './modal.service';

@Component({
  selector: 'app-test',
  template: `<button class="btn btn-info" (click)="openModal()">点击弹出模态框</button>`
})
export class TestComponent {
  constructor(private modalService: ModalService) {}

  openModal() {
    // 调用Service方法弹出模态框
    this.modalService.generatePopup();
  }
}

为什么不直接用jQuery选ID？ #

在Angular中，组件的DOM是封装的，如果模态框放在某个组件内部，外部的jQuery可能无法正确找到元素；而且Angular更推荐用组件通信+数据绑定的方式操作UI，而不是直接操作DOM，这样更符合Angular的设计理念。

如果之后你需要更灵活的模态框（比如动态修改内容、动态创建销毁），可以学习ComponentFactoryResolver来动态创建组件，但当前这个方案已经足够满足你的复用需求啦！

内容的提问来源于stack exchange，提问作者yavg