角2以上でモーダルダイアログを実装する方法

Question

私は角度をつける初心者です。

パッケージng2-bootstrapを使用してブートストラップモーダルを使用しました。

マイビューファイルは、私は/ showコンポーネント（タイプスクリプトファイル）から、このモーダルを非表示にする方法を知っておく必要があり

<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> 

です。

タイプスクリプトファイルには、あなたの共通の子供モード成分があなたの親コンポーネントで子コンポーネントを使用したとして

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, 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, 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) { 
    } 

} 

以下のようになります。上記のコードを使用すると、再利用できる共通のモーダルダイアログを別に持つことができます。あなたのヘッダー&フッタは同じままで、コンテンツ投影を使用すると、モーダルダイアログの本文を変更することができます。

LIVE DEMO

Answer 2

今（v1.8.1 +）を使用すると、モーダルサービス あなたはモーダルを起動しているところからモーダル http://valor-software.com/ngx-bootstrap/#/modals#service-section