好的。
我目前有一系列执行一系列操作的按钮。一个 CRUD 系统。我想在其中的一些窗口中添加模式窗口,例如在删除时,会在之前出现一个确认模式,具体取决于响应,是否继续使用将删除数据库记录的 API 调用。
我正在寻找,我认为我需要通过 TemplateRef 打开模式,但我找不到任何对我有用的东西或至少以我需要的方式解释如何使用它的来源。已经遇到此问题的人是否有一些可以提供帮助的文档或类似文件?
一切顺利。
在从答案中帮助我之后,我现在是:
模态HTML:
<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">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, World!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
模态组件
import { Component } from '@angular/core';
import { NgbModal, ModalDismissReasons, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'modal',
moduleId: module.id,
templateUrl: './modal.view.html'
})
export class ModalComponent {
constructor(private activeModal: NgbActiveModal){}
}
我要调用模态的组件:
import { Component, Input, Output, EventEmitter, AfterViewInit, ViewChild } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { ModalComponent } from '../modal/modal.component';
// Component decorator
@Component({
selector: 'test',
moduleId: module.id,
templateUrl: 'test.view.html',
})
// Component class
export class TestComponent {
// Constructor
constructor(
private modalService: NgbModal
){}
@ViewChild(ModalComponent)
private modalComponent: ModalComponent;
//Send to father component the copie selected.
showModal(): void {
this.modalService.open(this.modalComponent);
}
即便如此,当我点击时它仍然没有打开模式。即使与该函数相关的其余操作(为了代码的清晰我已省略)继续工作。我在控制台中没有错误。
您可以
ng-bootstrap
轻松使用打开/关闭弹出窗口并控制用户执行的操作。安装步骤非常简单,文档如下:
已编辑
在这里你有修改后的 plunk 工作。我建议您更改组件名称并创建其关联的 html 和 sass ;)
http://plnkr.co/edit/dF8p7V1jIikoiyRmBiJe?p=preview
我有同样的问题,解决方法如下:不需要
也没有
并且在
放置的是你导入的组件
也许这些信息可以帮助你:
Angular 2/5 - 自定义模态窗口/对话框