ng-bootstrap模态与Bootstrap 4不起作用

时间:2018-09-19 10:06:26

标签: angular bootstrap-4

我是angel的新手,我确实检查了类似的问题,但无法解决问题。

我正在我们现有的应用中尝试他们的demo example。不确定我在哪里做错了。

component.ts文件

import { Component, ChangeDetectionStrategy, } from '@angular/core';
import { IncidentListUserCoreComponent } from '../../core/incident-list-user-core.component';
import { IncidentListUserComponent } from 'projects/app-incident/src/app/incident-list-user/incident-list-user.component';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-my-incident-list-legacy',
  templateUrl: './my-incident-list-legacy-view.component.html',      
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class MyIncidentListLegacyViewComponent
 extends IncidentListUserComponent {
  ngOnInit() {
    const config = {DisplayMode: 'table', Pagination: true};
    super.Configure(config);
  }
}

export class NgbdModalBasic {
  closeResult: string;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  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}`;
    }
  }
}

component.html页面

<ng-template #content let-modal>
  <div class="modal-header">
  <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
  <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
  <span aria-hidden="true">&times;</span>
  </button>
  </div>
  <div class="modal-body">
  <form>
  <div class="form-group">
  <label for="dateOfBirth">Date of birth</label>
  <div class="input-group">
  <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
  <div class="input-group-append">
  <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
  </div>
  </div>
  </div>
  </form>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
  </div>
 </ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

此外,当我单击“启动演示模态”按钮时,我在控制台中收到此错误-

enter image description here

我缺少什么吗?

0 个答案:

没有答案