2

Tengo una aplicación de prueba en Angular 2, en este tengo un Modal que se muestra a partir de un botón.

¿Se puede mostrar el modal sin necesidad de botón', lo digo porque como parámetro me pide un content, que se lo paso a través del código html:

import { Component, OnInit, NgZone }    from '@angular/core';
import { Router }                       from '@angular/router';

//import '../rxjs-operators';

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

import { WhatsGPIService }              from '../services/WhatsGPI.service';
import { WhatsGPISignalService }        from    '../services/WhatsGPI.signal.service';
import { Message }                      from '../models/Message';

@Component({
    selector: 'my-app',
    templateUrl: '/app/templates/messages.html',
    styleUrls: ['../css/WhatsGPI.css']
})

export class AppComponent implements OnInit {

    title = 'WhatsGPI';

    closeResult:string = '';

    usuariLogejat:string = '';
    isLogged:boolean = false;

errorMessage: string;
Missatges: Message[];
signalService: WhatsGPISignalService;
public currentMessage: Message;
public allMessages: Message[];
public canSendMessage: Boolean;


constructor(
    private whatsGPIService: WhatsGPIService,
    private _signalRService: WhatsGPISignalService,
    private _ngZone: NgZone,
    private modalService: NgbModal)
{
    this.subscribeToEvents();
    this.canSendMessage = _signalRService.connectionExists;
    this.currentMessage = new Message();
    this.allMessages = new Array<Message>();
}

ngOnInit() {
    this.getMessages();
    //this.signalService = new WhatsGPISignalService();
}

open(content:any) {
    this.modalService.open(content).result.then(
    (result) => { 
        this.usuariLogejat = result;
        console.log(this.usuariLogejat);

        if(!(this.usuariLogejat === '')){
            this.isLogged = true;
        }else{
            this.isLogged = false;
        }
    }, 
    (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; 
                console.log(this.closeResult)});
}

private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
        return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
        return 'by clicking on a backdrop';
    } else {
        return  `with: ${reason}`;
    }
}

getMessages(): void {
    this.whatsGPIService.getMessages()
        .then(messages => {
            this.Missatges = messages
        });
}

addMessage(missatge: string): void {
    if (!this.usuariLogejat) { return; }
    this.whatsGPIService.addMessage(this.usuariLogejat, missatge)
        .then(message => {
            //this.Missatges.push(message);
            this.Missatges.push(message);
            this.getMessages();
        })
        .catch(error => this.errorMessage = <any>error);
} 

private subscribeToEvents(): void {
    console.log("Component, subscribeToEvents")

    this._signalRService.connectionEstablished.subscribe(() => {
        this.canSendMessage = true;
    });

    this._signalRService.messageReceived.subscribe((message: Message) => {
        this._ngZone.run(() => {
            console.log(message);
            this.currentMessage = new Message();
            this.Missatges.push(message);
        });
    });
}
}

y la plantilla html es la siguiente:

<div class="container">

<div class="row m-b-1 p-a-1">
    <div class="col-md-5">
        <h1 class="m-b-1 col-md-4 offset-md-2"><b>{{title}}</b></h1>
    </div>
    <div class="col-md-4">
        <h3>{{usuariLogejat}}</h3>
    </div>
    <div class="col-md-3">
        <button class="btn btn-lg btn-outline-primary" (click)="open(content)">Log In</button>
    </div>
</div>

<div class="row">
    <div class="col-md-8 offset-md-2">

        <div id="contenidorMissatges" class="p-a-1">
            <div *ngFor="let message of Missatges" class="boxMissatge p-l-1">
                <span>{{message.nom}}</span><br />
                <span class="missatge">{{message.missatge}} </span>
            </div>
        </div>

        <div *ngIf="isLogged" class="p-a-1 m-b-1">

            <hr />

            <div class="row enviaMissatge">
                <div class="col-md-2">
                    <label>Missatge:</label>
                </div>
                <div class="col-md-8">
                    <input #nouMissatge class="form-control" />
                </div>
                <div class="col-md-2">
                    <button (click)="addMessage(nouMissatge.value); nouMissatge.value=''">
                        Enviar
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>

<template ngbModalContainer #content let-c="close" let-d="dismiss">
    <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Entra al chat!!  -  WhatsGPI</h4>
    </div>
    <div class="modal-body">
        <p>Benvinguts al chat de GPI</p>
        <hr />
        <label>Nom d'Usuari:</label>
        <input #usuari type="text" class="form-control" placeholder="ex: Jordi" />
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="c(usuari.value)">Acceptar</button>
    </div>
</template>

</div>

2 respuestas 2

0

Sí se puede con una solicitud en el two way data binding de Angular 2, yo lo que hago es esto:

<component (requestShowModal)="newContactModal.show()"></component>

en tu caso sería:

<component (requestShowModal)="open(content)"></component>

Para esto tienes que tener un componente padre y un hijo para saber cuándo se llama al hijo y cargar el modal.

0

Al final utilice

ng-if="condición"

y, a través de un trigger, animé el aparecer y desaparecer.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.