दिलचस्प पोस्ट
एएसपी.नेट एमवीसी में टेम्पटडाटा बनाम सत्र का उपयोग कब किया जाए पाठ क्षेत्र की चौड़ाई के अनुसार टेक्स्ट आकार की गणना करें Java GUI में JTextArea के ऑटो-स्क्रोलिंग को कैसे सेट करें? कार्यों के लिए क्लिक करने योग्य लिंक के साथ IOS UITextView या UILabel सार वर्ग बनाम इंटरफेस सीएसएस फ़ाइल में सापेक्ष यूआरएल का उपयोग करना, यह किस स्थान से संबंधित है? छवियों को स्केलिंग करते समय एंटिलाइज़ेशन अक्षम करें कर्नेल को लिनक्स के अंतर्गत चलने वाली निष्पादन योग्य बाइनरी फाइल कैसे प्राप्त होती है? shared_ptr को हटाने का उपयोग न करें सीएसएस को शामिल करने का सर्वोत्तम तरीका? @import का उपयोग क्यों करें? एप्पल डेवलपर कार्यक्रम या भागने के बिना उपकरण पर आईओएस एप का परीक्षण करें एक तितर बितर डेटा सेट का उपयोग करके MatPlotLib में एक हीटमैप उत्पन्न करें क्यूटी जीयूआई एप में कंसोल आउटपुट? मैं एक फ़ील्ड को दूसरे से अधिक 'मूल्यवान' बनाने के लिए MySQL पूर्ण टेक्स्ट खोज प्रासंगिकता को हेरफेर कैसे कर सकता हूं? रिमोट GitHub का ग्रे आइकन क्या मतलब है

एनजी 2-बूटस्ट्रैप बाल घटक के रूप में मॉडल / छुपाएं

मैं कोणीय के लिए एक नौसिखिया हूँ

मैंने पैकेज एनजी 2-बूटस्ट्रैप का उपयोग करते हुए बूटस्ट्रैप मोडल का उपयोग किया है।

मेरा दृश्य फ़ाइल है

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

वेब के समाधान से एकत्रित समाधान "एनजी 2-बूटस्ट्रैप बाल घटक के रूप में मॉडल / छुपाएं"

आपका सामान्य बच्चा मॉडल घटक निम्नानुसार होगा:

 import {Component,Input, ViewChild} from '@angular/core'; import { ModalDirective } from 'ng2-bootstrap/ng2-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 'ng2-bootstrap/ng2-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) { } } 

उपरोक्त कोड का उपयोग करके आप एक अलग सामान्य मोडल संवाद कर सकते हैं जिसका पुन: उपयोग किया जा सकता है, ताकि आपका हेडर और पाद लेख एक समान रहे और आप मोडल संवाद के शरीर को बदलने के लिए सामग्री-प्रक्षेपण का उपयोग कर सकते हैं।

लाइव डेमो

अब (v1.8.1 +) आप मॉडल सेवा का उपयोग करके इसे आसान बना सकते हैं जो आप modals बनाने के लिए टेम्पलेट्स और घटकों का उपयोग कर सकते हैं http://valor-software.com/ngx-bootstrap/#/modals#service-section