问题描述
是否可以将 ngBootstrap 模态作为共享组件并在其他组件中使用它的实例.
我想要一个提示用户删除记录的 Modal,并且我想在具有不同记录类型的多个组件中重复使用它.
ngBootstrap 站点显示了一个组件即内容"示例,但在该示例中,ModalComponent 似乎决定了是打开还是关闭 ModalContents.我希望能够从另一个(任意)组件打开/关闭模式的实例.
这可能吗?
如下创建一个CommonModule,
从 '@angular/core' 导入 { NgModule};从'./modal.component'导入{CommonModalComponent};从 'ng2-bootstrap/ng2-bootstrap' 导入 { ModalDirective,ModalModule };@NgModule({进口:[模态模块],声明:[ CommonModalComponent ],出口:[CommonModalComponent]})导出类 CommonModule {}
如您所见,CommonModalComponent 是CommonModule,如下创建该组件,
从 '@angular/core' 导入 {Component,Input, ViewChild};从ng2-bootstrap/ng2-bootstrap"导入{ ModalDirective };@零件({选择器:'common-modal',模板:`<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"><div class="modal-dialog modal-sm"><div class="模态内容"><div class="modal-header"><h4 class="modal-title pull-left">{{title}}</h4><button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()"><span aria-hidden="true">×</span></按钮></div><div class="modal-body"><ng-content select=".modal-body"></ng-内容></div><div class="模态页脚"><div class="拉左"><button class="btn btn-default" (click)="hide()">取消</按钮></div></div></div></div></div>`,})导出类 CommonModalComponent {@ViewChild('childModal') public childModal:ModalDirective;@Input() 标题?:字符串;构造函数(){}展示(){this.childModal.show();}隐藏(){this.childModal.hide();}}
在 AppModule 中使用 CommonModule 及其组件如下,
从 '@angular/core' 导入 {Component, ViewChild, ViewContainerRef, NgModule};从@angular/platform-browser"导入 {BrowserModule};从'./common.module'导入{CommonModule};导入 {CommonModalComponent} './modal.component';@零件({选择器:'我的应用',模板:`
<h2>你好{{name}}</h2><button type="button" class="btn btn-primary" (click)="childModal.show()">打开模态</button><common-modal #childModal [title]="'common modal'"></通用模式></div>`,})导出类 App {@ViewChild('childComponent') childComponent:CommonModalComponent;名称:字符串;构造函数(私有 viewContainerRef:ViewContainerRef){this.name = 'Angular 2 Common Module with ModalComponent'}}@NgModule({导入:[ BrowserModule,CommonModule ],声明:[应用程序],引导程序:[应用程序]})导出类 AppModule {}
其他信息:
这个通用模块可以在任何地方使用来重现您的需求在 Angular 2 中的 ContentProjection 的帮助下,可以在下线
<ng-content select=".modal-body"></ng-内容>
在您的 AppComponent 中,您可以使用它并将项目添加到您的CommonModal 为,
<div class="modal-body">一些表单控件或显示内容</div>
这可以在这个 现场演示中看到
既然,你想要警告消息或确认的模式,你可以重用 common-modal 并创建另一个 WarningModalComponent并在应用程序中使用它
Is it possible to have a ngBootstrap modal as a shared component and use an instance of it in other components.
I'd like to have one Modal that prompts the user to delete a record and I'd like to re-use it across multiple components with different record types.
ngBootstrap site shows a "Components As Content" example but in that example it looks like the ModalComponent dictates whether to open or close the ModalContents. I'd like the ability to open/close an instance of a modal from another (arbitrary) component.
Is this possible?
Create a CommonModule as below,
import { NgModule} from '@angular/core'; import { CommonModalComponent } from './modal.component'; import { ModalDirective,ModalModule } from 'ng2-bootstrap/ng2-bootstrap'; @NgModule({ imports:[ModalModule], declarations: [ CommonModalComponent ], exports:[CommonModalComponent] }) export class CommonModule {}
As you can see, CommonModalComponent is a declaration inCommonModule, Create that component as below,
import {Component,Input, ViewChild} from '@angular/core'; import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap'; @Component({ selector: 'common-modal', template: ` <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title pull-left">{{title}}</h4> <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <ng-content select=".modal-body"> </ng-content> </div> <div class="modal-footer"> <div class="pull-left"> <button class="btn btn-default" (click)="hide()"> Cancel </button> </div> </div> </div> </div> </div> `, }) export class CommonModalComponent { @ViewChild('childModal') public childModal:ModalDirective; @Input() title?:string; constructor() { } show(){ this.childModal.show(); } hide(){ this.childModal.hide(); } }
Using the CommonModule and its components in the AppModule as below,
import {Component, ViewChild, ViewContainerRef, NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {CommonModule} from './common.module'; import {CommonModalComponent} './modal.component'; @Component({ selector: 'my-app', template: ` <div> <h2>Hello {{name}}</h2> <button type="button" class="btn btn-primary" (click)="childModal.show()">Open modal</button> <common-modal #childModal [title]="'common modal'"> </common-modal> </div> `, }) export class App { @ViewChild('childComponent') childComponent:CommonModalComponent; name:string; constructor(private viewContainerRef: ViewContainerRef) { this.name = 'Angular 2 Common Module with ModalComponent' } } @NgModule({ imports: [ BrowserModule,CommonModule ], declarations: [ App ], bootstrap: [ App ] }) export class AppModule {}
Additional Information:
This common module can be used any where to reproduce your needswith the help of ContentProjection in Angular 2 which can be seen inbelow line
<ng-content select=".modal-body"> </ng-content>
In your AppComponent, you can use this and add items to yourCommonModal as,
<div class="modal-body"> Some Form Controls or Displaying content </div>
This can be seen in this LIVE DEMO
Since, you want modal for warning messages or confirmation you canreuse the common-modal and create another WarningModalComponentand use that across application
这篇关于角 2+ &ngBootstrap - 共享模式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!