如何使用ng-bootstrap显示简单模态（Angular 2）
[英]How to display simple modal with ng-bootstrap (Angular 2)
问题描述
I'm trying to show a simple Modal with Ng2-bootstrap as per the following page: https://ng-bootstrap.github.io/#/components/modal 
我正在尝试使用Ng2-bootstrap显示一个简单的Modal，如下页所示： https ：//ng-bootstrap.github.io/#/components/modal
However I am getting errors such as: 但是我收到的错误如下：
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.
What am I doing wrong? 我究竟做错了什么？ I've got the following code to try and make this work: 我有以下代码尝试使这项工作：
Index.html: index.html的：
<body> <app-root>Loading...</app-root> <template ngbModalContainer></template> </body>
app.module.ts: app.module.ts：
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; ... @NgModule({... imports: [ BrowserModule, FormsModule, HttpModule, NgbModule.forRoot() ...
app.component.ts: 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 app.component.html
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
sas-modal.component.ts 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: 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">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
</div>
</template>
3 个解决方案
解决方案1
2 2016-12-08 06:36:05
sas-component.ts should be : - 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 Should contain SasModuleComponent in the declaration array and a entryComponent field that contains SasModuleComponent : - app.module.ts应该在声明数组中包含SasModuleComponent和包含SasModuleComponent的entryComponent字段： -
@NgModule({
imports: [ BrowserModule,
FormsModule , HttpModule, NgbModule.forRoot()],
declarations: [ AppComponent, SasModalComponent],
bootstrap: [ AppComponent ],
entryComponents: [SasModalComponent]
})
You need a entryComponent field in @NgModule()in your module file because you are loading the SasModuleComponent dynamically here this.modalService.open(SasModalComponent) . 您需要在模块文件中的@NgModule（）中使用entryComponent字段，因为您在此处动态加载SasModuleComponent this.modalService.open(SasModalComponent) 。
解决方案2
1 2016-12-08 04:11:34
Try adding <template ngbModalContainer></template> in app-root template 尝试在app-root模板中添加<template ngbModalContainer></template>
Example: 例：
@Component({
selector: 'app-root',
template: '<template ngbModalContainer></template>'
})
解决方案3
0 2016-12-09 01:40:11
saurav1405 's answer provided me with enough useful information to figure this out, however his solution didn't 100% work for me. saurav1405的回答为我提供了足够有用的信息来解决这个问题，但是他的解决方案并没有100％为我工作。
For this reason I've upvoted saurav1405 's response, but couldn't claim is as the answer as I've had to do a bit more to get it to work for me. 出于这个原因，我赞成了saurav1405的回复，但是不能说是答案，因为我必须多做一些才能让它为我工作。
The main difference was having a seperate control component and content component. 主要区别在于具有单独的控制组件和内容组件。
This is how I got it working: 这就是我的工作方式：
>> app.module.ts >> app.module.ts
Note: saurav1405 suggested putting ModalContentComponent into declarations , 注意： saurav1405建议将ModalContentComponent放入声明中 ， (possibly a typo after reviewing his comments again).
（再次审阅他的评论后可能是一个错字）。
but you need to put the actual modal custom modal components in here (in this case SasModalComponent & SasModalContent ). 但是你需要把实际的模态自定义模态组件放在这里（在这种情况下是SasModalComponent和SasModalContent ）。
And the content component ( SasModalContent ) needs to be the entry component. 内容组件（ SasModalContent ）需要是入口组件。
import { SasModalComponent, SasModalContent } from './sas-modal/sas-modal.component';
...
@NgModule({
declarations: [
AppComponent,
SasModalComponent,
SasModalContent
],
entryComponents: [SasModalContent],
...
>> app.component.html: >> app.component.html：
The ngbModalContainer declaration should be along side the component declaration in the parent component html template, not in the index.html, which I think was the main reason I was getting the errors posted in the question. ngbModalContainer声明应该与父组件html模板中的组件声明一起，而不是在index.html中，我认为这是我在问题中发布错误的主要原因。
<template ngbModalContainer></template>
<sas-modal-component></sas-modal-component>
>> sas-modal.component.ts: >> sas-modal.component.ts：
This file combines both the control component [sas-modal-component] (that opens the content / template) and the content component [sas-modal-content] (that has the reference to the active modal and modal template). 此文件结合了控件组件[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';
}
}
>> sas-modal.component.html: Contains the button / control to open the modal >> 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>
>> sas-modal-content.html: Holds the modal template - can be whatever you want >> 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">×</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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.