在角4中添加bootstrap模态

Question

我在Angular 4中添加了一个基本模态。问题在于它看起来像是在页面背景中出现的模态。

我有一个profile.component.ts。基本上我有：

import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; 
constructor(private modalService: NgbModal){}

open(){
      this.modalService.open('Hello there');
  }

在profile.component.html中，我有一个调用open（）函数的按钮。单击按钮时，唯一出现的是滚动条出现并消失。

我猜想有些东西丢失了。

提前致谢。

Answer 1

当你调用open()并且只是发送字符串将无法正常工作。 you should send Id instead。

你可以按照这个例子，它将完美地工作。

Code.ts

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap'; 
constructor(private modalService: NgbModal){}

open(){
      this.modalService.open(sayHello);
  }

private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
    return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
    return 'by clicking on a backdrop';
} else {
    return `with: ${reason}`;
}
}

Code.html

<ng-template ngbModalContainer></ng-template>
<ng-template #sayHello let-c="close" let-d="dismiss">
    <div class="modal-header ">
        <h6 class="modal-title text-uppercase ">Headding</h6>
        <button type="button " class="close " aria-label="Close " (click)="d( 'Cross click') ">
      <span aria-hidden="true ">&times;</span>
    </button>
    </div>
    <div class="modal-header ">
       HELLO :)
    </div>
    <div class="modal-footer">
        <button class="btn " (click)="d( 'Cross click') ">Close</button>
    </div>
</ng-template>

并且不要忘记导入

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';在你的app.module.ts

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';    
imports: [ NgbModule.forRoot(),
    ...
    ...
    ]

我认为这应该有所帮助。