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

Question

我正在使用 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' });
   }

}

Answer 1

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

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

ViewChild 和 ElementRef

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

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

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

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

干杯

尼尔

Answer 2

您可以使用 ngbModal 打开一个属于您的组件的模式（在这种情况下，您的按钮和您的按钮在同一个 html 中，（这是第一个示例）

<ng-template #content let-c="close" let-d="dismiss">
...
</ng-template>

<button (click)="open(content)">Launch demo modal</button>

或打开一个模态组件。在这种情况下，按钮在一个组件中，组件模态在另一个 模态组件就像 .看到没有“ng-template”。而在 .ts 中，需要导入 NgbModal、NgbActiveModal 来获得关闭按钮的功能

<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">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>

打开模态的组件必须导入NgbModal并放入构造函数才能打开模态

Answer 3

有几个类和组件构成了 Bootstrap 4 模式。您不能只省略其中的一些类和组件，然后希望仍能获得工作模式。

使用以下代码 sn-p 作为模板。如果您想要一个工作模式，您的代码需要生成该 HTML。不要遗漏必要的部分（div 和类）。

点击下面的“运行代码sn-p”按钮查看它的工作情况：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>