- 首页
- 其他开发
- 如何在 Angular 2 及更高版本中实现模态对话框
如何在 Angular 2 及更高版本中实现模态对话框
[英] How to implement Modal Dialog in Angular 2 and above
本文介绍了如何在 Angular 2 及更高版本中实现模态对话框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 angular 的新手.
我使用 ng2-bootstrap 包使用了引导模式.
我的查看文件是
<div bsModal #lgModal="bs-modal" class="modalfade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><h4 class="modal-title pull-left">区域主</h4><button type="button" class="close pull-right" (click)="lgModal.hide();"咏叹调标签=关闭"><span aria-hidden="true">×</span>
<div class="modal-body">模态内容在这里...
<div class="modal-footer"><button type="submit" class="btn btn-primary">添加</button>
我需要知道如何在组件(类型脚本文件)中显示/隐藏此模式.
类型脚本文件是
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';从@angular/router"导入{路由器}；从@angular/forms"导入 { FormGroup, Validators, FormBuilder, FormControl };从'./area'导入{区域}；从'./area.service'导入{AreaService}；@成分({模块 ID:module.id，选择器:'我的区域'，templateUrl: './areas.component.html',styleUrls: ['./areas.component.css']})导出类 AreasComponent 实现 OnInit {area_form:表单组；new_area:面积；区域:区域[]；@ViewChild('lgModal') lgModal:ElementRef;构造函数(私人区域服务:区域服务，专用路由器:路由器，私有 form_builder: FormBuilder) { }getAreas(): 空 {this.areaService.getAreas().then(areas => this.areas = area);}提交(区域:区域):无效{控制台日志(区域)；this.areaService.create(area).then(area => { this.areas.push(area) })}ngOnInit(): 无效 {this.getAreas();this.lgModal.show();this.area_form = this.form_builder.group({名称:['', Validators.required],密码:[''，Validators.required]，状态:['活动']，类型:['商务服务区']})}}
解决方案
你常用的子模态组件如下
import {Component,Input, ViewChild} from '@angular/core';从 'ngx-bootstrap' 导入 { ModalDirective };@成分({选择器:'通用模式'，模板:`<div bsModal #childModal="bs-modal" class="modalfade" 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><div class="modal-body"><ng-content select=".modal-body"></ng-content>
<div class="modal-footer"><div class="pull-left"><button class="btn btn-default" (click)="hide()">取消</button>
`，})导出类 CommonModalComponent {@ViewChild('childModal') public childModal:ModalDirective;@Input() 标题:字符串；构造函数(){}展示(){this.childModal.show();}隐藏(){this.childModal.hide();}}
在父组件中使用子组件如下图
import {Component, ViewChild, NgModule,ViewContainerRef} from '@angular/core'从'@angular/platform-browser' 导入 { BrowserModule };从 'ngx-bootstrap' 导入 { ModalDirective,ModalModule };从'./child.modal'导入{CommonModalComponent}；@成分({选择器:'我的应用'，模板:`<button type="button" class="btn btn-primary" (click)="childModal.show()">打开模态</button><common-modal #childModal [title]="'common modal'"><div class="modal-body">嘿嘿</div></common-modal>`，})导出类 AppComponent {@ViewChild('childModal') childModal :CommonModalComponent;构造函数(私有 viewContainerRef:ViewContainerRef){}}
使用上面的代码，你可以有一个单独的通用模态对话框，可以重复使用，这样你的标题 &页脚保持不变，您可以使用 Content-Projection 来更改模态对话框的主体.
现场演示
I am a newbie to angular.
I have used bootstrap modal using the package ng2-bootstrap.
My View file is
<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title pull-left">Area Master</h4>
<button type="button" class="close pull-right" (click)="lgModal.hide();" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal Content here...
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
I need to know how to show/hide this modal from the component (type script file).
Type script file is
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, Validators, FormBuilder, FormControl } from '@angular/forms';
import { Area } from './area';
import { AreaService } from './area.service';
@Component({
moduleId: module.id,
selector: 'my-areas',
templateUrl: './areas.component.html',
styleUrls: ['./areas.component.css']
})
export class AreasComponent implements OnInit {
area_form: FormGroup;
new_area: Area;
areas: Area[];
@ViewChild('lgModal') lgModal:ElementRef;
constructor(
private areaService: AreaService,
private router: Router,
private form_builder: FormBuilder) { }
getAreas(): void {
this.areaService
.getAreas()
.then(areas => this.areas = areas);
}
submit(area: Area): void {
console.log(area);
this.areaService.create(area)
.then(area => { this.areas.push(area) })
}
ngOnInit(): void {
this.getAreas();
this.lgModal.show();
this.area_form = this.form_builder.group({
name: ['', Validators.required],
pincode: ['', Validators.required],
status: ['Active'],
type: ['Busines Service Area']
})
}
}
解决方案
Your common child modal component will be as below
import {Component,Input, ViewChild} from '@angular/core';
import { ModalDirective } from 'ngx-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 child component in your parent component will look as below
import {Component, ViewChild, NgModule,ViewContainerRef} from '@angular/core'
import { BrowserModule } from '@angular/platform-browser';
import { ModalDirective,ModalModule } from 'ngx-bootstrap';
import {CommonModalComponent} from './child.modal';
@Component({
selector: 'my-app',
template: `
<button type="button" class="btn btn-primary" (click)="childModal.show()">Open modal</button>
<common-modal #childModal [title]="'common modal'">
<div class="modal-body">
Hi heloo </div>
</common-modal>
`,
})
export class AppComponent {
@ViewChild('childModal') childModal :CommonModalComponent;
constructor(private viewContainerRef: ViewContainerRef) {
}
}
Using the above code you can have a separate common modal dialog which can be reused, so that your header & footer remains the same and you can use Content-Projection to use change the body of the modal dialog.
LIVE DEMO
这篇关于如何在 Angular 2 及更高版本中实现模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
