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

Question

我正在使用 Bootstrap 4，因此我能够启动模态窗口并从组件渲染数据，但我没有看到页眉和页脚，因为我有 HTML 的一部分，我无法关闭模态窗口。下面的代码缺少什么？

模态组件.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' });
   }

}

Answer 1

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

我遇到了同样的问题，如果您仔细查看示例，前提是它们使用模板引用变量( #content )。要使其在较小的更改下工作，您可以导入所需的其他元素；

ViewChild 和 ElementRef


从 '@angular/core' 导入 { Component, OnInit, ViewEncapsulation, ElementRef, ViewChild };


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


关闭结果:字符串；
@ViewChild('content') 内容:ElementRef;


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

干杯

尼尔