问题
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\']
})
}
}
回答1:
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
回答2:
The below answer is in reference to the latest ng-bootstrap
Component Controller
import { TemplateRef, ViewChild } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-app-registration',
templateUrl: './app-registration.component.html',
styleUrls: ['./app-registration.component.css']
})
export class AppRegistrationComponent implements OnInit {
@ViewChild('editModal') editModal : TemplateRef<any>; // Note: TemplateRef
constructor(private modalService: NgbModal) { }
openModal(){
this.modalService.open(this.editModal);
}
}
Component HTML
<ng-template #editModal let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Edit Form</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- YOUR FORM DATA -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close()">Save</button>
</div>
</ng-template>
app.module.ts
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [
...
],
imports: [
...
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
回答3:
Now (v1.8.1+) you can do it easier by using modal service you can use templates and components for creating modals http://valor-software.com/ngx-bootstrap/#/modals#service-section
来源:https://stackoverflow.com/questions/42735858/how-to-implement-modal-dialog-in-angular-2-and-above