Skip to main content
3 de 3
Correcciones ortográficas
Mariano
  • 24.5k
  • 20
  • 76
  • 105

Cómo podría identificar el modal para poder cargarlo al arranque del componente en Angular2?

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>