El problema que tengo es el siguiente:
Tengo una aplicación de prueba para aprender Angular 2en Angular 2, en este tengo un Modal que se muestra a partir de un botón. Ahora viene la pregunta.
Se¿Se puede mostrar el modal sin necesidad de botónbotón', lo digo porque como parámetro me pide un content
, que se lo paso a través del código html...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);
});
});
}
}
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 htmlhtml 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">×</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>
<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">×</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>