Come utilizzare il codice per aprire un modal in Angular 2?

Di solito usiamo data-target="#myModal" nel <button> per aprire un modal. In questo momento ho bisogno di usare i codici per controllare quando aprire il modal.Come utilizzare il codice per aprire un modal in Angular 2?

Se io uso [hidden] o *ngIf per mostrarlo, ho bisogno di rimuovere class="modal fade", altrimenti, il modale non mostrerà mai. Come questo:

<div [hidden]="hideModal" id="myModal">

Tuttavia, in questo caso, dopo aver rimosso class="modal fade", il modale non sbiadiscono e non ha alcuna ombra in background. E quel che è peggio, verrà visualizzato nella parte inferiore dello schermo anziché nel centro dello schermo.

C'è un modo per mantenere e utilizzare il codice per aprirlo?

<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     </div> 
    </div> 
    </div> 
</div>

fonte

2016-02-15 Hongbo Miao

perché utilizzare '[nascosta]' nel modale? –

@PardeepJain Come ho detto, [hidden] e class = "modal fade" insieme il modale non mostrerà mai nemmeno [hidden] = "false". Se vuoi usare [nascosto], devi rimuovere class = "modal fade" –

Questo è un modo che ho trovato. È possibile aggiungere un pulsante nascosto:

<button id="openModalButton" [hidden]="true" data-toggle="modal" data-target="#myModal">Open Modal</button>

quindi utilizzare il codice per il pulsante "click" per aprire il modal:

document.getElementById("openModalButton").click();

In questo modo si può mantenere lo stile di bootstrap del modale e la dissolvenza in animazione.

fonte

2016-02-15 03:49:08

Questo non funziona in fase di compilazione e non con dattiloscritto. Il suo tipo di hackish –

Il link 'http: //valor-software.com/ng2-bootstrap/#/modals' risulta in un 404 oggi ... – gogognome

@gogognome grazie, ho appena rimosso quel link, perché al giorno d'oggi ci sono molti pacchetti disponibili se la persona sceglie di utilizzare un pacchetto. –

Qui è la mia piena attuazione della componente modale bootstrap angular2:

suppongo che nel principale file index.html (con <html> e <body> tag) in fondo <body> tag avete:

<script src="assets/js/jquery-2.1.1.js"></script> 
    <script src="assets/js/bootstrap.min.js"></script>

modal.component.ts:

import { Component, Input, Output, ElementRef, EventEmitter, AfterViewInit } from '@angular/core'; 

declare var $: any;// this is very importnant (to work this line: this.modalEl.modal('show')) - don't do this (becouse this owerride jQuery which was changed by bootstrap, included in main html-body template): let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js'); 

@Component({ 
    selector: 'modal', 
    templateUrl: './modal.html', 
}) 
export class Modal implements AfterViewInit { 

    @Input() title:string; 
    @Input() showClose:boolean = true; 
    @Output() onClose: EventEmitter<any> = new EventEmitter(); 

    modalEl = null; 
    id: string = uniqueId('modal_'); 

    constructor(private _rootNode: ElementRef) {} 

    open() { 
     this.modalEl.modal('show'); 
    } 

    close() { 
     this.modalEl.modal('hide'); 
    } 

    closeInternal() { // close modal when click on times button in up-right corner 
     this.onClose.next(null); // emit event 
     this.close(); 
    } 

    ngAfterViewInit() { 
     this.modalEl = $(this._rootNode.nativeElement).find('div.modal'); 
    } 

    has(selector) { 
     return $(this._rootNode.nativeElement).find(selector).length; 
    } 
} 

let modal_id: number = 0; 
export function uniqueId(prefix: string): string { 
    return prefix + ++modal_id; 
}

modal.html:

<div class="modal inmodal fade" id="{{modal_id}}" tabindex="-1" role="dialog" aria-hidden="true" #thisModal> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header" [ngClass]="{'hide': !(has('mhead') || title) }"> 
       <button *ngIf="showClose" type="button" class="close" (click)="closeInternal()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <ng-content select="mhead"></ng-content> 
       <h4 *ngIf='title' class="modal-title">{{ title }}</h4> 
      </div> 
      <div class="modal-body"> 
       <ng-content></ng-content> 
      </div> 

      <div class="modal-footer" [ngClass]="{'hide': !has('mfoot') }" > 
       <ng-content select="mfoot"></ng-content> 
      </div> 
     </div> 
    </div> 
</div>

E esempio di utilizzo nel componente client Editor: client-edit-component.ts:

import { Component } from '@angular/core'; 
import { ClientService } from './client.service'; 
import { Modal } from '../common'; 

@Component({ 
    selector: 'client-edit', 
    directives: [ Modal ], 
    templateUrl: './client-edit.html', 
    providers: [ ClientService ] 
}) 
export class ClientEdit { 

    _modal = null; 

    constructor(private _ClientService: ClientService) {} 

    bindModal(modal) {this._modal=modal;} 

    open(client) { 
     this._modal.open(); 
     console.log({client}); 
    } 

    close() { 
     this._modal.close(); 
    } 

}

client-edit.html:

<modal [title]='"Some standard title"' [showClose]='true' (onClose)="close()" #editModal>{{ bindModal(editModal) }} 
    <mhead>Som non-standart title</mhead> 
    Some contents 
    <mfoot><button calss='btn' (click)="close()">Close</button></mfoot> 
</modal>

Naturalmente titolo, showClose, mhead e mfoot ar parametri opzionali.

fonte

2016-07-08 22:31:04

Il modo migliore che ho trovato. Inserisci #lgModal o qualche altro nome di variabile nel tuo modal.

Secondo lei:

<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"> 
     <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     <h4 class="modal-title">Large modal</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
    </div> 
    </div> 
</div>

nel componente

import {Component, ViewChild, AfterViewInit} from '@angular/core'; 
import {CORE_DIRECTIVES} from '@angular/common'; 
// todo: change to ng2-bootstrap 
import {MODAL_DIRECTIVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap'; 
import {ModalDirective} from 'ng2-bootstrap/ng2-bootstrap'; 


@Component({ 
    selector: 'modal-demo', 
    directives: [MODAL_DIRECTIVES, CORE_DIRECTIVES], 
    viewProviders:[BS_VIEW_PROVIDERS], 
    templateUrl: '/app/components/modals/modalDemo.component.html' 
}) 
export class ModalDemoComponent implements AfterViewInit{ 

    @ViewChild('childModal') public childModal: ModalDirective; 
    @ViewChild('lgModal') public lgModal: ModalDirective; 

    public showChildModal():void { 
    this.childModal.show(); 
    } 

    public hideChildModal():void { 
    this.childModal.hide(); 
    } 

    ngAfterViewInit() { 
     this.lgModal.show(); 
    } 

}

fonte

2016-08-15 16:26:40

Includere jQuery come al solito tag script all'interno di index.html.

Dopo tutte le importazioni, ma prima di dichiarare @Component, aggiungere:

declare var $: any;

Ora si è liberi di utilizzare jQuery in qualsiasi punto del codice angolare 2 dattiloscritto:

$("#myModal").modal('show');

Riferimento: https://stackoverflow.com/a/38246116/2473022

fonte

2017-03-04 14:58:14 Moobie

Lo faccio in questo modo. Bootstrap 3 dipende in qualche modo da jquery. – yonexbat

-7

prova ad usare questa finestra per angular2

https://github.com/BahgatMashaly/ng-window

fonte

2017-03-18 08:37:35

L'interfaccia utente mi fa piangere. – Tabares

perché? non ti capisco –

wow che è orribile – Martin8768

Un modo semplice per raggiungere questo obiettivo in angolare 2 o 4(Supponendo che si sta utilizzando bootstrap 4)

Component.html

<button type="button" (click)="openModel()">Open Modal</button> 
 

 
<div #myModel class="modal fade"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <h5 class="modal-title ">Title</h5> 
 
     <button type="button" class="close" (click)="closeModel()"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Component.ts

import {Component, OnInit, ViewChild} from '@angular/core'; 

@ViewChild('myModal') myModal; 

openModel() { 
    this.myModal.nativeElement.className = 'modal fade show'; 
} 
closeModel() { 
    this.myModal.nativeElement.className = 'modal hide'; 
}

fonte

2017-08-22 07:41:28

Il modo che ho usato per farlo senza un sacco di codifica è .. ho il pulsante nascosto con l'id="employeeRegistered"

On il mio file .ts I import ElementRef from '@angular/core'

Poi, dopo elaboro tutto sul mio metodo (click) fare come segue:

this.el.nativeElement.querySelector('#employeeRegistered').click();

poi i display modali come previsto ..

fonte

2017-12-04 02:17:32

Come utilizzare il codice per aprire un modal in Angular 2?

risposta

Problemi correlati