[英]Angular 2+ add ng-bootstrap Modal to component library
我正在使用ng-bootstrap,我想向我构建的组件库中添加一个可重用的模式。
我有我的模板
<p>
<ng-template #messageModal let-closeModal="close('Cross click')">
<div id="resultModal">
<div class="modal-header">
<h4 class="mt-3">{{header}}
</h4>
<button id="messageModalClose" type="button" class="close" aria-label="Close" (click)="closeModal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{message}}
</div>
</div>
</ng-template>
</p>
和组件
import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { NgbModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ms-modal',
templateUrl: './ms-modal.component.html',
styleUrls: ['./ms-modal.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class MsModalComponent implements OnInit {
@Input() header: string;
@Input() message:string;
private _modalOptions: NgbModalOptions = {
backdrop: 'static',
keyboard: false,
size: 'lg',
centered: true
};
constructor(private modalService: NgbModal) { }
ngOnInit() {
}
OpenModal(_messageModal) {
this.modalService.open(_messageModal, this._modalOptions);
}
}
我为标题和消息添加了@Inputs我的组件库构建良好
在我将组件库导入到我的应用程序中,我添加了模式标签
<ms-modal *ngIf="showModal==true" [header]="header" [message]="message">
</ms-modal>
当我设置showModal = true时,什么也没有发生。
showModal:any = false;
this.showModal = "true";
我想我不确定如何正确地连接它,以在各种应用程序中使用组件库中的模态。
您需要使用布尔值将showModal设置为true,例如:
this.showModal = true;
而不是像以前那样用字符串值设置它:
this.showModal = "true";
因为您的*ngIf="showModal==true"
使用的是布尔值true
而不是字符串值"true"
有条件地显示您的模态。
好的,我已经完成了这项工作,但我有几处错误。
请记住,我在组件库中工作的不仅仅是应用程序。
在我的组件库中...
我有我的模板
<div class="modal-header">
<h4 class="mt-3">
{{header}}
</h4>
<button id="messageModalClose" type="button" class="close" aria-label="Close"
(click)="closeModal()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{message}}
</div>
和组件
import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';
import { NgbModal, NgbModalOptions, NgbActiveModal } from '@ng-bootstrap/ng-
bootstrap';
@Component({
selector: 'ms-modal',
templateUrl: './ms-modal.component.html',
styleUrls: ['./ms-modal.component.scss'],
//encapsulation: ViewEncapsulation.None,
})
export class MsModalComponent implements OnInit {
@Input() header: string;
@Input() message:string;
private _modalOptions: NgbModalOptions = {
backdrop: 'static',
keyboard: false,
size: 'lg',
centered: true
};
constructor(public activeModal: NgbActiveModal) { }
ngOnInit() {
}
closeModal() {
this.activeModal.close();
}
}
我将组件导入“ ms-components”中的应用模块 import {msModalModule}中;
我将'msModalModule'添加到@NgModule imports数组,还将模块引用的组件添加到entryComponents
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
HttpClientModule,
FormsModule,
msModalModule
],
bootstrap: [AppComponent],
entryComponents:[MsModalComponent]
})导出类AppModule {}
现在在我的app.component.ts中添加一个函数来处理打开模态并传入输入值
OpenModal(header,message){
***NgbModalOptions is optional
const modalOptions: NgbModalOptions = {
backdrop: 'static',
keyboard: false,
size: 'lg',
centered: true,
};
const modalRef = this.modalService.open(MsModalComponent,modalOptions)
modalRef.componentInstance.header = header;
modalRef.componentInstance.message = message;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.