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模式的一些类和组件。你不能只是遗漏一些类和组件，然后希望仍然得到一个工作模式。

使用以下代码段作为模板。如果需要工作模式，您的代码需要生成该HTML。不要遗漏必要的部分（div和class）。

点击下面的“运行代码段”按钮，看它是否正常工作：

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

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

3 个答案: