Comment utiliser le code pour ouvrir un modal en angle 2?
Habituellement, nous utilisons data-target="#myModal" dans le <button> ouvrir un modal. J'ai besoin d'utiliser des codes pour contrôler quand ouvrir le modal.
Si j'utilise [hidden] ou *ngIf pour le montrer, j'ai besoin de supprimer class="modal fade", sinon, le modal ne s'affichera jamais. Comme ceci:
<div [hidden]="hideModal" id="myModal">
cependant, dans ce cas, après avoir supprimé class="modal fade", le modal ne s'efface pas et n'a pas d'ombre à l'arrière-plan. Et ce qui est pire, il affichera en bas de l'écran au lieu de l'écran centre.
Est il y a un moyen de le garder class="modal fade" et utilisez le code pour l'ouvrir?
<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>
8 réponses
C'est une façon que j'ai trouvée. Vous pouvez ajouter un bouton caché:
<button id="openModalButton" [hidden]="true" data-toggle="modal" data-target="#myModal">Open Modal</button>
puis utilisez le code pour "cliquer" sur le bouton pour ouvrir le modal:
document.getElementById("openModalButton").click();
cette façon peut garder le style bootstrap du modal et le fondu dans l'animation.
incluez jQuery comme d'habitude dans les balises de script dans index.HTML.
après toutes les importations mais avant de déclarer @Component, ajouter:
declare var $: any;
Maintenant vous êtes libre d'utiliser jQuery n'importe où dans votre code 2 angulaire:
$("#myModal").modal('show');
Référence: https://stackoverflow.com/a/38246116/2473022
manière facile d'y parvenir en angulaire 2 ou 4(en Supposant que vous utilisez bootstrap 4)
Composant.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">×</span>
</button>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
</div>
</div>
</div>Composant.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';
}
voici ma mise en œuvre complète de modal bootstrap angular2 component:
je suppose que dans votre index principal.fichier html (<html> et <body> tags) au bas de <body> tag vous avez:
<script src="assets/js/jquery-2.1.1.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
modal.composant.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">×</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>
et exemple d'utilisation dans le composant Client Editor: client-modifier-composant.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-modifier.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>
titre du cours, paramètres optionnels showClose, mhead et mfoot ar.
meilleur chemin que j'ai trouvé. Mettre #lgModal ou un autre nom de variable dans votre modal.
selon vous:
<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">×</span>
</button>
<h4 class="modal-title">Large modal</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
Dans votre composant
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();
}
}
Crois que j'ai trouvé la bonne façon de le faire à l'aide de ngx-bootstrap. D'abord importer les classes suivantes:
import { ViewChild } from '@angular/core';
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
à l'intérieur de l'implémentation de classe de votre component ajouter une propriété @ViewCild, une fonction pour ouvrir le modal et n'oubliez pas de configurer modalService comme une propriété privée à l'intérieur du constructeur de classe components:
@ViewChild('editSomething') editSomethingModal : TemplateRef<any>;
...
modalRef: BsModalRef;
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}
...
constructor(
private modalService: BsModalService) { }
la partie "editSomething" de la déclaration @ViewChild fait référence au fichier de modèles de composants et à son modèle modal la mise en œuvre (#editSomething):
...
<ng-template #editSomething>
<div class="modal-header">
<h4 class="modal-title pull-left">Edit ...</h4>
<button type="button" class="close pull-right" aria-label="Close"
(click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
(click)="modalRef.hide()"
>Close</button>
</div>
</ng-template>
et finalement appelez la méthode pour ouvrir le modal où vous voulez comme ceci:
console.log(this.editSomethingModal);
this.openModal( this.editSomethingModal );
ceci.editSomethingModal est un TemplateRef cela pourrait être montré par le service modal.
et voila! Le modal défini dans votre fichier de modèle de composant est affiché par un appel provenant de l'intérieur de l'implémentation de votre classe de Composant. Dans mon cas, j'ai utilisé ceci pour montrer un modal de l'intérieur d'un gestionnaire d'événements.
Le Chemin que j'ai utilisé pour le faire sans beaucoup de codage est..
J'ai le bouton caché avec le id="employeeRegistered"
Sur mon .ts le fichier I import ElementRef from '@angular/core'
puis après que je traite tout sur mon (click) méthode faire comme suit:
this.el.nativeElement.querySelector('#employeeRegistered').click();
puis le modal s'affiche comme prévu..
