दिलचस्प पोस्ट
सिस्टम से बाहर मेमोरी अपवाद। ड्रॉइंग। इमेज। फ्रॉमफाइल () मूल्यों के आधार पर मानचित्र <कुंजी, मान> सॉर्ट करें (जावा) क्या मैं एक फ़ील्ड में एकाधिक MySQL पंक्तियों को जोड़ सकता हूँ? प्रदर्शन करनेवाला एक रिसाव का कारण हो सकता है क्योंकि इसकी चयनकर्ता अज्ञात है मैं DOM रेंज ऑब्जेक्ट के टेक्स्ट को कैसे उजागर कर सकता हूं? C # को सी ++ शैली 'मित्र' कीवर्ड क्यों नहीं प्रदान करता है? स्विफ्ट आईएडी – ADBannerView चेतावनी और CGAffineTransformInvert के 10 से अधिक उदाहरण: एकवचन मैट्रिक्स आउटपुट ओरेकल 9i रिक्त स्ट्रिंग को नल के रूप में क्यों लेता है? कुछ स्क्रिप्ट बंद PHP टैग क्यों छोड़ देते हैं, '?>'? तिथि (डेटस्ट्रिंग) और नए दिनांक (डेटस्ट्रिंग) के बीच अंतर उग्र बॉक्स पाया नहीं जा सका या दूरदराज के कैटलॉग – असंगत कर्ल संस्करण में एक्सेस नहीं किया जा सका जावा शून्य संदर्भ प्रकार के लिए उपयोग करता है? डुप्लिकेट प्रविष्टियों को कैसे हटाएं? क्या इस मोड को खोजने के लिए एक अंतर्निहित कार्य है? यूआरएल में डॉट्स 404 एएसपी.नेट एमवीसी और आईआईएस के साथ हैं

एनजी 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