javascript - ng-bootstrap模态页眉和页脚不显示？

我使用的是Bootstrap 4，因此能够启动模式窗口并从组件中渲染数据，但是我看不到我具有HTML的页眉和页脚，因此无法关闭模式窗口。以下代码缺少什么？

modal.component.ts

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

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

@Component({
  selector: 'ngbd-modal-content',
  templateUrl: './modal.component.html',
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

modal.component.html

<ng-template #theModal let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 *ngIf="type == 0" class="modal-title">Header</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
  </div>
  <div class="modal-footer">
    <button type="button" id="cancel-edit-btn" class="btn btn-primary" (click)="c('Close click')">Cancel</button>
  </div>
</ng-template>

home.component.ts

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

export class HomeComponent implements OnChanges{

constructor(private detailService: DetailService,private ngbModal: NgbModal) {};

 onClick(evt){
     const modalRef = this.ngbModal.open(HomeComponent,{ size: 'lg', backdrop: 'static' });
   }

}

最佳答案

我知道这是一个老问题，但这是一个答案

我遇到了同样的问题，如果您仔细查看示例，他们将使用模板引用变量（#content）。为了使其能够进行较小的改动，您可以导入所需的其他元素。

ViewChild和ElementRef

import { Component, OnInit, ViewEncapsulation, ElementRef, ViewChild } from '@angular/core';

然后在closeResult变量下添加对模板变量的引用

closeResult: string;@ViewChild('content') content: ElementRef;

然后，在正确标记所有内容后，将显示页眉和页脚，否则内容将只是您传递的正文和文本。

干杯

尼尔

关于javascript - ng-bootstrap模态页眉和页脚不显示？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48811062/