Angular2及以上版本如何实现模态对话框

Question

我是 angular 的新手。

我使用 bootstrap 模态包 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">&times;</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>

我需要知道如何从组件（类型脚本文件）中show/hide这个模式。

类型脚本文件是

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']
    })
  }
}

Answer 1

您的常用子模态组件如下所示

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">&times;</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();
  }
}

在父组件中使用子组件将如下所示

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 来使用更改模态对话框的主体。

LIVE DEMO

Answer 2

现在（v1.8.1+）使用模态服务可以更轻松地做到这一点您可以使用模板和组件来创建模态 http://valor-software.com/ngx-bootstrap/#/modals#service-section

Answer 3

以下回答参考最新ng-bootstrap

组件控制器

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);
  }

}

组件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">&times;</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 { }

Angular2及以上版本如何实现模态对话框

How to implement Modal Dialog in Angular 2 and above

ng2-bootstrap

ngx-bootstrap

angular