为什么我的模态在后台打开？答案

【问题标题】：Why does my modal open in the background?为什么我的模态在后台打开？
【发布时间】：2018-11-25 15:31:01
【问题描述】：

我正在尝试使用 ng-bootstrap 4 在我的 Angular 7 应用程序中创建模态，但模态组件一直在后台作为 div 打开，而不是作为模态。我做错了什么？

这是组件打开模式：

import { Component, OnInit } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, Validators} from '@angular/forms';
import { AddPetModalComponent } from '../add-pet-modal/add-pet-modal.component';
import { Pet } from '../../models/pet';
import { PetsService } from '../../services/pets.service';

@Component({
  selector: 'app-pets-list',
  templateUrl: './pets-list.component.html',
  styleUrls: ['./pets-list.component.less']      
})
export class PetsListComponent implements OnInit {

  petForm: FormGroup;
  pets: Pet[];
  closeResult: string;

  constructor(
    private formBuilder: FormBuilder,
    private petService: PetsService,
    private modalService: NgbModal,
  ) { }

  openFormModal() {
    const modalRef = this.modalService.open(AddPetModalComponent);

    modalRef.result.then((result) => {
      console.log(result);
    }).catch((error) => {
      console.log(error);
    });
  }

模态组件：

import { Component, OnInit } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-add-pet-modal',
  templateUrl: './add-pet-modal.component.html',
  styleUrls: ['./add-pet-modal.component.less']
})
export class AddPetModalComponent implements OnInit {

  constructor(
    public activeModal: NgbActiveModal
  ) { }

  ngOnInit() {
  }

  closeModal() {
    this.activeModal.close('Modal Closed');
  }

}

github上的模块链接：https://github.com/Strzesia/Daily-Rat-Monitor/tree/fix/src/app/pets

【问题讨论】：

你能在 stackblitz 中重现这个问题吗？
您能否提供应用程序或调试器中 DOM 的屏幕截图，并解释您遇到的真正问题是什么？

标签： javascript angular modal-dialog bootstrap-modal ng-bootstrap

【解决方案1】：

我快速浏览了您的代码，您似乎包含了一些必需品，但我得到了它，但这个 Stackblitz 没有问题。一些可能对您有帮助的建议：

在您的 app.module 中，您缺少 entryComponents: [ AddPetModalComponent ]，因为您正在使用组件工厂动态填充模式。
可能是缩小的引导 CSS 可能会惹恼您，请测试将 index.html 放在 CDN 的开头，如 Stackblitz 示例中所示，看看是否有帮助。
删除你的 node_modules 并重新安装依赖项

希望一些观点有所帮助！

【讨论】：