9

मुझे कोई समस्या है। मुझे टोस्टर को यह सूचित करने की ज़रूरत है कि जब कोई मॉडल को छिपाना चाहता है तो परिवर्तन सहेजे नहीं जाते हैं। मुझे मोडल छिपाने से पहले टोस्टर को ट्रिगर करने की आवश्यकता है, और जब उपयोगकर्ता मोडल को खारिज करने के लिए फिर कोशिश करता है तो इसे अनुमति दें। मैं कुछ इस तरह की कोशिश की:छिपाने से पहले मॉडल घटना

declare let jQuery: any; 
declare let $: any; 
declare let toastr: any; 

@Component({ 
    selector: 'app-trigger', 
    templateUrl: './trigger.component.html', 
    styleUrls: ['./trigger.component.scss'] 
}) 
export class TriggerComponent implements OnInit { 

    name: string 

    private canHideModal = true; 

    constructor() { 
    } 


ngOnInit(){ 
     const self = this; 
     $('#triggerModal').on('hide.bs.modal',() => { 
     if (self.canHideModal) { 
      //hide modal here <--------- 
     } else { 
      toastr['warning']('You have unsaved changes'); 

      self.canHideModal = true; 
      return false 
     } 
     }); 
    } 

fireModal(changes : {action:string, name:string}){ 
    changes.action = 'show'; 
    changes.name = 'test'; 
    this.name = changes.name 
    $('#triggerModal').modal(changes.action); 
} 

} 

और यह पहली बार के लिए ठीक काम करता है, के बाद इस hide घटना overwriten किया जा रहा है और समारोह $('#triggerModal').on('hide.bs.modal',() => { अब और ट्रिगर नहीं करता।

HTML:

<div class="modal fade" id="triggerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" aria-hidden="true"> 
    <div class="modal-dialog modal-lg px-4" role="document"> 

     <!--Content--> 
     <div class="modal-content"> 

      <!--Header--> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
         <span aria-hidden="true">×</span> 
        </button> 
      </div> 

      <!--Body--> 
      <div class="modal-body mb-0"> 

       <!--Grid row--> 
       <div class="row d-flex justify-content-center mb-4"> 

        <!--Grid column--> 
        <div class="col-md-6"> 

         <!--Name--> 
         <div class="md-form"> 
          <input type="text" id="triggerStartName" (input)="canHideModal = false" class="form-control" #triggerName [value]="name"> 
          <label for="triggerStartName" [ngClass]="{ 'active': name }">Trigger name</label> 
         </div> 

        </div> 
        <!--Grid column--> 

       </div> 
       <!--Grid row--> 

      </div> 

      <!--Footer--> 
      <div class="modal-footer justify-content-center"> 
       <button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal">Close</button> 
      </div> 

     </div> 
     <!--/.Content--> 

    </div> 
</div> 
+0

हमें के HTML हिस्सा दिखाने कोड प्रभावित और आप मोडल, कोणीय मोड ओ jQuery मोड कैसे दिखा रहे हैं। –

+0

@ डैनियलसेगुरा पेरेज़ ने किया, मुझे उम्मीद है कि यह स्पष्ट है –

उत्तर

3

आप ng-bootstrap Modal component साथ यह कर सकते हैं, अपने beforeDismiss option के लिए एक विधि बताए, के रूप में this plunker में सचित्र द्वारा:

import {Component} from '@angular/core'; 

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap'; 

@Component({ 
    selector: 'ngbd-modal-basic', 
    templateUrl: 'src/modal-basic.html' 
}) 
export class NgbdModalBasic { 
    closeResult: string; 
    private canHideModal = false; 

    constructor(private modalService: NgbModal) {} 

    open(content) { 
    this.canHideModal = false; 
    const options : NgbModalOptions = { 
     beforeDismiss:() => { 
     if (this.canHideModal) { 
      return true; 
     } else { 
      alert('You have unsaved changes'); 
      this.canHideModal = true; 
      return false; 
     } 
     } 
    };  
    this.modalService.open(content, options).result.then((result) => { 
     this.closeResult = `Closed with: ${result}`; 
    }, (reason) => { 
     this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; 
    }); 
    } 
    ... 
} 
संबंधित मुद्दे