Question

我正在尝试使用ng-bootstrap 4在我的angular 7应用程序中创建模态，但是模态组件将在div中以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

Answer 1

我快速浏览了一下您的代码，并且您似乎包含了基本知识，尽管此Stackblitz没问题，但我可以正常工作。一些可能会帮助您的指针：

在您的app.module中，您正在缺少entryComponents: [ AddPetModalComponent ]，因为您正在使用组件工厂动态填充模态。
可能是经过简化的CSS引导程序，可能会引起您的困扰，请像Stackblitz示例中那样测试将index.html放入CDN的开头，并查看是否有帮助。
删除您的node_modules并重新安装依赖项

希望一些要点能帮助您！

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

1 个答案: