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

Question

我正在使用 Bootstrap 4，因此我能够启动模态 window 并从组件呈现数据，但我没有看到属于 [=25= 的页眉和页脚] 我无法关闭模式 window。以下代码中缺少什么？

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

您可以使用 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 2

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

使用以下代码片段作为模板。如果您想要一个工作模式，您的代码需要生成 HTML。不要遗漏必要的部分 (divs & 类)。

单击下面的 "run code snippet" 按钮查看它是否正常工作：

<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>

Answer 3

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

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

ViewChild 和 ElementRef

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

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

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

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

干杯

尼尔

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

ng-bootstrap modal header and footer not displaying?

javascript

twitter-bootstrap

angular-ui-bootstrap

bootstrap-4

angular