如何在Angular 2及更高版本中实现模态对话框 [英] How to implement Modal Dialog in Angular 2 and above
问题描述
我是Angle的新手.
I am a newbie to angular.
我已经使用软件包 ng2-bootstrap 来使用引导模态.
I have used bootstrap modal using the package ng2-bootstrap.
我的查看文件是
<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).
类型脚本文件为
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) {
}
}
使用上面的代码,您可以有一个单独的通用模式对话框,可以重复使用该对话框,以便标题&页脚保持不变,您可以使用 Content-Projection 来更改模式对话框的主体.
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屋!