modal dialog - कोणीय 2.0 और मोडल संवाद




modal-dialog angular (6)

मैं कुछ उदाहरण खोजने की कोशिश कर रहा हूं कि कोणीय 2.0 में पुष्टिकरण संवाद कैसे करें। मैं Angular 1.0 के लिए बूटस्ट्रैप संवाद का उपयोग कर रहा हूं और Angular 2.0 के लिए वेब में कोई भी उदाहरण नहीं पा रहा हूं। मैंने कोणीय 2.0 डॉक्स को भी बिना किसी भाग्य के चेक किया।

क्या एंगुलर 2.0 के साथ बूटस्ट्रैप संवाद का उपयोग करने का कोई तरीका है?


अब एनपीएम पैकेज के रूप में उपलब्ध है

angular-custom-modal

@ स्टीफन पॉल continuation ...

  • कोणीय 2 और बूटस्ट्रैप सीएसएस (एनीमेशन संरक्षित है)
  • सं JQuery
  • सं बूटस्ट्रैप.जेएस
  • कस्टम मोडल सामग्री का समर्थन करता है
  • एक दूसरे के ऊपर कई मोडल के लिए सपोर्ट।
  • Moduralized
  • मोडल के खुलने पर स्क्रॉल को अक्षम करें
  • दूर नेविगेट करने पर मोडल नष्ट हो जाता है।
  • आलसी कंटेंट इनिशियलाइज़ेशन, जो मोडल से बाहर होने पर ngOnDestroy (ed) हो जाता है।
  • मोडल दिखाई देने पर पैरेंट स्क्रॉलिंग अक्षम हो जाती है

आलसी सामग्री आरंभीकरण

क्यों?

कुछ मामलों में आप बंद होने के बाद अपनी स्थिति को बनाए रखने के लिए मोडल नहीं करना चाहते, बल्कि प्रारंभिक अवस्था में बहाल कर सकते हैं।

मूल मोडल मुद्दा

सामग्री को सीधे दृश्य में पास करना वास्तव में इसे उत्पन्न करता है इससे पहले कि मोडल प्राप्त होने से पहले ही इसे आरंभ कर देता है। मोडल में *ngIf आवरण का उपयोग करने पर भी ऐसी सामग्री को मारने का कोई तरीका नहीं है।

उपाय

ng-templateng-template तब तक प्रस्तुत नहीं करता जब तक कि ऐसा करने का आदेश न दिया जाए।

मेरी-component.module.ts

...
imports: [
  ...
  ModalModule
]

मेरी-component.ts

<button (click)="reuseModal.open()">Open</button>
<app-modal #reuseModal>
  <ng-template #header></ng-template>
  <ng-template #body>
    <app-my-body-component>
      <!-- This component will be created only when modal is visible and will be destroyed when it's not. -->
    </app-my-body-content>
    <ng-template #footer></ng-template>
</app-modal>

modal.component.ts

export class ModalComponent ... {
  @ContentChild('header') header: TemplateRef<any>;
  @ContentChild('body') body: TemplateRef<any>;
  @ContentChild('footer') footer: TemplateRef<any>;
 ...
}

modal.component.html

<div ... *ngIf="visible">
  ...
  <div class="modal-body">
    ng-container *ngTemplateOutlet="body"></ng-container>
  </div>

संदर्भ

मेरा कहना है कि नेट के आसपास उत्कृष्ट आधिकारिक और सामुदायिक प्रलेखन के बिना यह संभव नहीं होगा। यह *ngTemplateOutlet कुछ को यह समझने में मदद कर सकता है कि ng-template , *ngTemplateOutlet और @ContentChild वर्क कैसे बेहतर हैं

https://angular.io/api/common/NgTemplateOutlet
https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/
https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e

पूर्ण कॉपी-पेस्ट समाधान

modal.component.html

<div
  (click)="onContainerClicked($event)"
  class="modal fade"
  tabindex="-1"
  [ngClass]="{'in': visibleAnimate}"
  [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}"
  *ngIf="visible">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <ng-container *ngTemplateOutlet="header"></ng-container>
        <button class="close" data-dismiss="modal" type="button" aria-label="Close" (click)="close()">×</button>
      </div>
      <div class="modal-body">
        <ng-container *ngTemplateOutlet="body"></ng-container>
      </div>
      <div class="modal-footer">
        <ng-container *ngTemplateOutlet="footer"></ng-container>
      </div>
    </div>
  </div>
</div>

modal.component.ts

/**
 * @Stephen Paul https://.com/a/40144809/2013580
 * @zurfyx https://.com/a/46949848/2013580
 */
import { Component, OnDestroy, ContentChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: 'modal.component.html',
  styleUrls: ['modal.component.scss'],
})
export class ModalComponent implements OnDestroy {
  @ContentChild('header') header: TemplateRef<any>;
  @ContentChild('body') body: TemplateRef<any>;
  @ContentChild('footer') footer: TemplateRef<any>;

  public visible = false;
  public visibleAnimate = false;

  ngOnDestroy() {
    // Prevent modal from not executing its closing actions if the user navigated away (for example,
    // through a link).
    this.close();
  }

  open(): void {
    document.body.style.overflow = 'hidden';

    this.visible = true;
    setTimeout(() => this.visibleAnimate = true, 200);
  }

  close(): void {
    document.body.style.overflow = 'auto';

    this.visibleAnimate = false;
    setTimeout(() => this.visible = false, 100);
  }

  onContainerClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.close();
    }
  }
}

modal.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ModalComponent } from './modal.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  exports: [ModalComponent],
  declarations: [ModalComponent],
  providers: [],
})
export class ModalModule { }

ASUI संवाद जांचें जो रनटाइम पर बनाते हैं। उसे छिपाने और तर्क दिखाने की कोई जरूरत नहीं है। बस सेवा एओटी एएसयूआई एनपीएम का उपयोग करके रनटाइम पर एक घटक बनाएगी


मैं अपने प्रोजेक्ट के लिए ngx-bootstrap उपयोग ngx-bootstrap हूं।

आप ngx-bootstrap डेमो पा सकते हैं

गीथूब here

कैसे इस्तेमाल करे:

  1. ngx-bootstrap स्थापित करें

  2. अपने मॉड्यूल के लिए आयात करें

// RECOMMENDED (doesn't work with system.js)
import { ModalModule } from 'ngx-bootstrap/modal';
// or
import { ModalModule } from 'ngx-bootstrap';

@NgModule({
  imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}
  1. सरल स्थिर मोडल
<button type="button" class="btn btn-primary" (click)="staticModal.show()">Static modal</button>
<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
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">Static modal</h4>
         <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
         <span aria-hidden="true">&times;</span>
         </button>
      </div>
      <div class="modal-body">
         This is static modal, backdrop click will not close it.
         Click <b>&times;</b> to close modal.
      </div>
   </div>
</div>
</div>

यह एक सरल दृष्टिकोण है जो कोणीय 2. को छोड़कर jquery या किसी अन्य पुस्तकालय पर निर्भर नहीं करता है। नीचे दिए गए घटक (errorMessage.ts) का उपयोग किसी अन्य घटक के बच्चे के दृश्य के रूप में किया जा सकता है। यह केवल एक बूटस्ट्रैप मोडल है जो हमेशा खुला या दिखाया जाता है। यह दृश्यता ngIf कथन द्वारा नियंत्रित होती है।

errorMessage.ts

import { Component } from '@angular/core';
@Component({
    selector: 'app-error-message',
    templateUrl: './app/common/errorMessage.html',
})
export class ErrorMessage
{
    private ErrorMsg: string;
    public ErrorMessageIsVisible: boolean;

    showErrorMessage(msg: string)
    {
        this.ErrorMsg = msg;
        this.ErrorMessageIsVisible = true;
    }

    hideErrorMsg()
    {
        this.ErrorMessageIsVisible = false;
    }
}

errorMessage.html

<div *ngIf="ErrorMessageIsVisible" class="modal fade show in danger" id="myModal" role="dialog">
    <div class="modal-dialog">

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Error</h4>
            </div>
            <div class="modal-body">
                <p>{{ErrorMsg}}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" (click)="hideErrorMsg()">Close</button>
            </div>
        </div>
    </div>
</div>

यह एक उदाहरण जनक नियंत्रण है (कुछ गैर-प्रासंगिक कोड संक्षिप्तता के लिए छोड़ दिया गया है):

parent.ts

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/common';
import {Router, RouteSegment, OnActivate, ROUTER_DIRECTIVES } from '@angular/router';
import { OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';


@Component({
    selector: 'app-application-detail',
    templateUrl: './app/permissions/applicationDetail.html',
    directives: [ROUTER_DIRECTIVES, ErrorMessage]  // Note ErrorMessage is a directive
})
export class ApplicationDetail implements OnActivate
{
    @ViewChild(ErrorMessage) errorMsg: ErrorMessage;  // ErrorMessage is a ViewChild



    // yada yada


    onSubmit()
    {
        let result = this.permissionsService.SaveApplication(this.Application).subscribe(x =>
        {
            x.Error = true;
            x.Message = "This is a dummy error message";

            if (x.Error) {
                this.errorMsg.showErrorMessage(x.Message);
            }
            else {
                this.router.navigate(['/applicationsIndex']);
            }
        });
    }

}

parent.html

<app-error-message></app-error-message>
// your html...

यहां बताया गया है कि GitHub पर Angular2 ऐप के भीतर आप बूटस्ट्रैप मोडल का उपयोग कैसे कर सकते हैं, इसका एक उत्कृष्ट उदाहरण है

इसका सार यह है कि आप बूटस्ट्रैप html और jquery आरंभीकरण को एक घटक में लपेट सकते हैं। मैंने एक पुन: प्रयोज्य modal घटक बनाया है जो आपको टेम्प्लेट चर का उपयोग करके एक खुले ट्रिगर करने की अनुमति देता है।

<button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button>

<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello World!
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>

आपको बस npm पैकेज स्थापित करने और अपने ऐप मॉड्यूल में मोडल मॉड्यूल को पंजीकृत करने की आवश्यकता है:

import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';

@NgModule({
    imports: [Ng2Bs3ModalModule]
})
export class MyAppModule {}

कोणीय 7 + NgBootstrap

मुख्य घटक से मोडल खोलने का एक सरल तरीका और परिणाम वापस करने के लिए। मैं यही चाहता था। मैंने एक स्टेप-बाय-स्टेप ट्यूटोरियल तैयार किया, जिसमें स्क्रैच से एक नया प्रोजेक्ट बनाना, नॉगटस्ट्रैप को स्थापित करना और मोडल का निर्माण शामिल है। आप या तो इसे क्लोन कर सकते हैं या गाइड का पालन कर सकते हैं।

आशा है कि यह कोणीय में नई मदद करता है।

https://github.com/wkaczurba/modal-demo

विवरण:

मोडल-सिंपल टेम्पलेट (modal-simple.component.html):

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Are you sure?</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>You have not finished reading my code. Are you sure you want to close?</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('yes')">Yes</button>
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('no')">No</button>
  </div>
</ng-template>

Modal-simple.component.ts:

import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-modal-simple',
  templateUrl: './modal-simple.component.html',
  styleUrls: ['./modal-simple.component.css']
})
export class ModalSimpleComponent implements OnInit {
  @ViewChild('content') content;
  @Output() result : EventEmitter<string> = new EventEmitter();

  constructor(private modalService : NgbModal) { }

  open() {
    this.modalService.open(this.content, {ariaLabelledBy: 'modal-simple-title'})
      .result.then((result) => { console.log(result as string); this.result.emit(result) }, 
        (reason) => { console.log(reason as string); this.result.emit(reason) })
  }

  ngOnInit() {
  }

}

इसका डेमो (app.component.html) - रिटर्न ईवेंट से निपटने का सरल तरीका:

<app-modal-simple #mymodal (result)="onModalClose($event)"></app-modal-simple>
<button (click)="mymodal.open()">Open modal</button>

<p>
Result is {{ modalCloseResult }}
</p>

modal बंद होने के बाद app.component.ts - onModalClosed को निष्पादित किया जाता है:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  modalCloseResult : string;
  title = 'modal-demo';

  onModalClose(reason : string) {
    this.modalCloseResult = reason;
  }    
}

चियर्स