在Angular 4中，NgbModal.open无法工作

Question

我希望使用Angular 4.0.0和ng-bootstrap 1.0.0-beta.4在模态框中显示一条消息，但它并没有显示出模态框。

app-module.ts

@NgModule({
// ...
declarations: [
  LoginComponent
],
imports: [
// ...
  NgbModule.forRoot()
],
entryComponents: [LoginComponent],
})
export class AppModule { }

login.component.ts

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
   @ViewChild('examplemodal')
   private modalRef: TemplateRef<any>;

   constructor(private modalService: NgbModal) { }

   //.... some event that fires onModalRequest() 

   onModalRequest(): void {
    const modalRef = this.modalService.open(this.modalRef); //Not working

    modalRef.result.then((result) => {
      console.log(result);
      console.log('closed');
    }).catch( (result) => {
      console.log(result);
      console.log('cancelling');
    });
  }
}

examplemodal.html

<ng-template #examplemodal>
  <div class="modal">
    stuff here...
  </div>
</ng-template>

请问有什么可以帮到您的吗？

- Rafael Reyes

---

这个有错误吗？ - eko

@RafaelReyes - 你的项目中是否包含 Bootstrap 4 的 CSS？我认为你使用的 ng-bootstrap 版本需要一个旧版本的 Bootstrap（类似 4.0.0-beta.3）。 - ConnorsFan

我怀疑ng-bootstrap能够与Bootstrap 3一起使用。 - ConnorsFan

它适用于Angular 5..我正在使用Angular 4 @ConnorsFan - Rafael Reyes

不，它只是不显示模态框。@Rahul - Rafael Reyes

Answer 1

这是我在我的应用程序中的实现方式：

app.module.ts

@NgModule({
// ...
declarations: [
  LoginComponent,
  ModalComponent
],
imports: [
// ...
  NgbModule.forRoot()
],
entryComponents: [ModalComponent], //Only Modal component included here
bootstrap: [AppComponent]
})
export class AppModule { }

我打开模态框的组件。在你的情况下，是 LoginComponent。

imports ....
import { ModalComponent} from '../Modal/Modal.component'; //My actual Modal component which includes HTML for modal

    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
    })
    export class LoginComponent {
       @ViewChild('examplemodal')
       private modalRef: TemplateRef<any>;

       constructor(private modalService: NgbModal) { }

       //.... some event that fires onModalRequest() 

       onModalRequest(): void {
        const modalRef = this.modalService.open(ModalComponent); //Added Modal Component here

         modalRef.componentInstance.src = link;//anything u wish to pass to modal component @Input 

 modalRef.result.then((result) => {
      console.log(result);
      console.log('closed');
    }).catch( (result) => {
      console.log(result);
      console.log('cancelling');
    });

      }
    }

Modal.component.ts:

import { Component, OnInit, Input } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
  @Input() src;
  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit() {
  }

}

Modal.component.html:

<div class="modal-header">
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
          STUFF HERE
</div>

这里是工作中的演示链接：Demo 请注意：您需要安装Bootstrap 4以使用SCSS。npm install bootstrap -D 并在您的style.scss文件中引用它，例如：

@import "node_modules/bootstrap/scss/bootstrap";

- user1608841

Answer 2

在我的情况下，当它被调用于 ngOnInit() 内时，模态框没有显示出来。解决方案是使用 setTimeout() 进行包装。我知道这个解决方案并不完美，但也许可以帮助其他人节省时间。

setTimeout(function(){
   this.modalService.open(this.content, { centered: true });
}.bind(this), 1000);

- Dawid D