Question

我正在尝试使用Ng2-bootstrap显示一个简单的Modal，如下页所示：https://ng-bootstrap.github.io/#/components/modal

但是我收到的错误如下：

Error in ./AppComponent class AppComponent - inline template:7:0 caused by: Missing modal container, add <template ngbModalContainer></template> to one of your application templates.

ORIGINAL EXCEPTION: Missing modal container, add <template ngbModalContainer></template> to one of your application templates.

我做错了什么？我有以下代码试图让这项工作：

的index.html：

<body> <app-root>Loading...</app-root> <template ngbModalContainer></template> </body>

app.module.ts：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; ... @NgModule({... imports: [ BrowserModule, FormsModule, HttpModule, NgbModule.forRoot() ...

app.component.ts：

import { NgbModal, NgbActiveModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { SasModalComponent } from './sas-modal/sas-modal.component';
...
constructor(..., private modalService: NgbModal){
}
...
open() {
  console.log("trying to open");
  const modalRef = this.modalService.open(SasModalComponent);
}

app.component.html

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

SAS-modal.component.ts

import { NgbModal, NgbActiveModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
...
@Component({
  selector: 'sas-modal',
  templateUrl: './sas-modal.component.html',
  styleUrls: ['./sas-modal.component.css']
})
export class SasModalComponent {
  closeResult: string;

  constructor(private modalService: NgbModal) {}

  open(content) {
    this.modalService.open(content);
  }
}

SAS-modal.component.html：

<template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
  </div>
</template>

Answer 1

sas-component.ts应该是： -

import { NgbModal, NgbActiveModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
...
@Component({
  selector: 'sas-modal',
  templateUrl: './sas-modal.component.html',
  styleUrls: ['./sas-modal.component.css']
})
export class SasModalComponent {
  closeResult: string;

  constructor(private activeModal: NgbActiveModal) {}

}

app.module.ts应该在声明数组中包含SasModuleComponent和a 包含SasModuleComponent的entryComponent字段： -

@NgModule({
  imports: [ BrowserModule,
   FormsModule , HttpModule, NgbModule.forRoot()],
  declarations: [ AppComponent, SasModalComponent],
  bootstrap: [ AppComponent ],
  entryComponents: [SasModalComponent]
})

在模块文件中需要@NgModule（）中的entryComponent字段，因为您在此处动态加载SasModuleComponent this.modalService.open(SasModalComponent)。

Answer 2

尝试在app-root模板中添加<template ngbModalContainer></template>

示例：

@Component({ selector: 'app-root', template: '<template ngbModalContainer></template>' })

Answer 3

saurav1405 的回答为我提供了足够有用的信息来解决这个问题，但他的解决方案并没有100％为我工作。

出于这个原因，我已经对 saurav1405 的回复进行了投票，但是我不得不提出答案，因为我必须多做一些才能让它为我工作。< / p>
主要区别在于有一个单独的控件组件和内容组件。

这就是我的工作方式：

<强>＆GT;＆GT; app.module.ts

注意： saurav1405 建议将 ModalContentComponent 纳入声明， （可能在再次审阅他的评论之后的一个错字。）

但你需要在这里放置实际的模态自定义模态组件（在这种情况下 SasModalComponent ＆amp; SasModalContent ）。

内容组件（ SasModalContent ）必须是条目组件。

import { SasModalComponent, SasModalContent } from './sas-modal/sas-modal.component'; ... @NgModule({ declarations: [ AppComponent, SasModalComponent, SasModalContent ], entryComponents: [SasModalContent], ...

<强>＆GT;＆GT; app.component.html：

ngbModalContainer 声明应该与父组件html模板中的组件声明一起，而不是在index.html中，我认为这是我在问题中发布错误的主要原因

<template ngbModalContainer></template>
<sas-modal-component></sas-modal-component>

<强>＆GT;＆GT; SAS-modal.component.ts：

此文件结合了控件组件 [sas-modal-component] （打开内容/模板）和内容组件 [sas-modal-content] （其中包含对活动模态和模态模板的引用）。

import {Component, Input, Compiler } from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'sas-modal-content',
  templateUrl: 'sas-modal-content.html'
})
export class SasModalContent {
  @Input() name;
  constructor(public activeModal: NgbActiveModal) {  }
}

@Component({
  selector: 'sas-modal-component',
  templateUrl: 'sas-modal.component.html'
})
export class SasModalComponent {
  constructor(private modalService: NgbModal, private compiler: Compiler) {  }

  open() {
    //this.compiler.clearCacheFor(SasModalContent); //Only use when the template is caching when you don't want it to.
    const modalRef = this.modalService.open(SasModalContent);
    modalRef.componentInstance.name = 'World';
  }
}

<强>＆GT;＆GT; sas-modal.component.html： 包含用于打开模态的按钮/控件

<h2> Click the button to open the modal</h2>
<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

<强>＆GT;＆GT; sas-modal-content.html： 持有模态模板 - 可以是您想要的任何内容

<div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    <h4 class="modal-title">Hi there!</h4>
</div>
<div class="modal-body card-info">
    <h3 style="color: white;">So nice to meet you</h3>
    <h4 style="color: white;">This modal is great!</h4>
</div>
<div class="modal-footer ">
    <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
</div>

如何使用ng-bootstrap显示简单模态（Angular 2）

3 个答案: