Question

我正在尝试将NgbModal用于我的应用。我复制粘贴Modal的示例与组件，我遇到了这个问题我无法找到原因，出于某种原因模态打开然后立即关闭。

我在调试时发现它，我确实看到模式弹出，但是当完成调试时它会变得很接近，所以没有调试我甚至看不到它会被打开。

我正在使用Angular 4.3.1和bootstrap v4.0.0-alpha.6

这是我正在使用的代码，就像文档中的示例

一样

模态组件

import {Component} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import  {NgbdModalContent} from '../modal-content/modal-content.component';

@Component({
  selector: 'ngbd-modal-component',
  templateUrl: './general-modal.component.html'
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }
}

模态内容

import {Component, Input} from '@angular/core';

import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <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">
      <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

Angular 4 NgbModal立即关闭

0 个答案: