navigationend - router events subscribe angular 4
Angular 2 forma fácil de hacer un diálogo de confirmación. (5)
Llego tarde a la fiesta, pero aquí hay otra implementación que usa ng-bootstrap : https://stackblitz.com/edit/angular-confirmation-dialog
confirmacion-dialog.service.ts
import { Injectable } from ''@angular/core'';
import { Observable } from ''rxjs/Observable'';
import { NgbModal } from ''@ng-bootstrap/ng-bootstrap'';
import { ConfirmationDialogComponent } from ''./confirmation-dialog.component'';
@Injectable()
export class ConfirmationDialogService {
constructor(private modalService: NgbModal) { }
public confirm(
title: string,
message: string,
btnOkText: string = ''OK'',
btnCancelText: string = ''Cancel'',
dialogSize: ''sm''|''lg'' = ''sm''): Promise<boolean> {
const modalRef = this.modalService.open(ConfirmationDialogComponent, { size: dialogSize });
modalRef.componentInstance.title = title;
modalRef.componentInstance.message = message;
modalRef.componentInstance.btnOkText = btnOkText;
modalRef.componentInstance.btnCancelText = btnCancelText;
return modalRef.result;
}
}
confirmación-dialog.ponent.ts
import { Component, Input, OnInit } from ''@angular/core'';
import { NgbActiveModal } from ''@ng-bootstrap/ng-bootstrap'';
@Component({
selector: ''app-confirmation-dialog'',
templateUrl: ''./confirmation-dialog.component.html'',
styleUrls: [''./confirmation-dialog.component.scss''],
})
export class ConfirmationDialogComponent implements OnInit {
@Input() title: string;
@Input() message: string;
@Input() btnOkText: string;
@Input() btnCancelText: string;
constructor(private activeModal: NgbActiveModal) { }
ngOnInit() {
}
public decline() {
this.activeModal.close(false);
}
public accept() {
this.activeModal.close(true);
}
public dismiss() {
this.activeModal.dismiss();
}
}
confirmación-dialog.component.html
<div class="modal-header">
<h4 class="modal-title">{{ title }}</h4>
<button type="button" class="close" aria-label="Close" (click)="dismiss()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{ message }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" (click)="decline()">{{ btnCancelText }}</button>
<button type="button" class="btn btn-primary" (click)="accept()">{{ btnOkText }}</button>
</div>
Usa el diálogo así:
public openConfirmationDialog() {
this.confirmationDialogService.confirm(''Please confirm..'', ''Do you really want to ... ?'')
.then((confirmed) => console.log(''User confirmed:'', confirmed))
.catch(() => console.log(''User dismissed the dialog (e.g., by using ESC, clicking the cross icon, or clicking outside the dialog)''));
}
¿Existe alguna forma no tan complicada de hacer un diálogo de confirmación en angular 2, la idea es hacer clic en un elemento y luego mostrar una ventana emergente o modal para confirmar su eliminación? No sé cómo hacerlo si lo confirma o lo cancela hace algo. La función de clic funciona bien, el único problema es que no sé muy bien cómo usarla. También tengo otro modal con el mismo plugin con la diferencia que uso.
this.modal.open(MyComponent);
Y no quiero crear otro componente solo para mostrar un cuadro de confirmación, por eso lo pregunto.
Para reutilizar la implementación de un solo diálogo de confirmación en una aplicación de varios módulos, el diálogo debe implementarse en un módulo separado. Aquí hay una forma de hacer esto con Material Design y FxFlex, aunque ambos pueden recortarse o reemplazarse.
Primero el módulo compartido (./app.module.ts):
import {NgModule} from ''@angular/core'';
import {CommonModule} from ''@angular/common'';
import {MatDialogModule, MatSelectModule} from ''@angular/material'';
import {ConfirmationDlgComponent} from ''./confirmation-dlg.component'';
import {FlexLayoutModule} from ''@angular/flex-layout'';
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
MatDialogModule
],
declarations: [
ConfirmationDlgComponent
],
exports: [
ConfirmationDlgComponent
],
entryComponents: [ConfirmationDlgComponent]
})
export class SharedModule {
}
Y el componente de diálogo (./confirmation-dlg.component.ts):
import {Component, Inject} from ''@angular/core'';
import {MAT_DIALOG_DATA} from ''@angular/material'';
@Component({
selector: ''app-confirmation-dlg'',
template: `
<div fxLayoutAlign="space-around" class="title colors" mat-dialog-title>{{data.title}}</div>
<div class="msg" mat-dialog-content>
{{data.msg}}
</div>
<a href="#"></a>
<mat-dialog-actions fxLayoutAlign="space-around">
<button mat-button [mat-dialog-close]="false" class="colors">No</button>
<button mat-button [mat-dialog-close]="true" class="colors">Yes</button>
</mat-dialog-actions>`,
styles: [`
.title {font-size: large;}
.msg {font-size: medium;}
.colors {color: white; background-color: #3f51b5;}
button {flex-basis: 60px;}
`]
})
export class ConfirmationDlgComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}
Entonces podemos usarlo en otro módulo:
import {FlexLayoutModule} from ''@angular/flex-layout'';
import {NgModule} from ''@angular/core'';
import {GeneralComponent} from ''./general/general.component'';
import {NgbModule} from ''@ng-bootstrap/ng-bootstrap'';
import {CommonModule} from ''@angular/common'';
import {MaterialModule} from ''../../material.module'';
@NgModule({
declarations: [
GeneralComponent
],
imports: [
FlexLayoutModule,
MaterialModule,
CommonModule,
NgbModule.forRoot()
],
providers: []
})
export class SystemAdminModule {}
El manejador de clics del componente usa el diálogo:
import {Component} from ''@angular/core'';
import {ConfirmationDlgComponent} from ''../../../shared/confirmation-dlg.component'';
import {MatDialog} from ''@angular/material'';
@Component({
selector: ''app-general'',
templateUrl: ''./general.component.html'',
styleUrls: [''./general.component.css'']
})
export class GeneralComponent {
constructor(private dialog: MatDialog) {}
onWhateverClick() {
const dlg = this.dialog.open(ConfirmationDlgComponent, {
data: {title: ''Confirm Whatever'', msg: ''Are you sure you want to whatever?''}
});
dlg.afterClosed().subscribe((whatever: boolean) => {
if (whatever) {
this.whatever();
}
});
}
whatever() {
console.log(''Do whatever'');
}
}
Simplemente utilizando el this.modal.open(MyComponent); tal como lo hizo, no le devolverá un objeto cuyos eventos puede suscribirse, por lo que no puede hacer que haga algo. Este código crea y abre un diálogo a cuyos eventos podemos suscribirnos.
Si recorta el css y html, este es realmente un componente simple, pero escribirlo por sí mismo le da control sobre su diseño y diseño, mientras que un componente escrito previamente tendrá que ser mucho más pesado para darle ese control.
Una forma sencilla de confirmar es usar la alerta de confirmación del navegador nativo. La plantilla puede tener un botón o enlace.
<button type=button class="btn btn-primary" (click)="clickMethod(''name'')">Delete me</button>
Y el método componente puede ser algo como abajo.
clickMethod(name: string) {
if(confirm("Are you sure to delete "+name)) {
console.log("Implement delete functionality here");
}
}
ACTUALIZAR
A continuación se proporciona otra forma de implementar una ventana emergente de confirmación simple utilizando angular2 / material que implementé en mi proyecto.
app.module.ts
import { FormsModule, ReactiveFormsModule } from ''@angular/forms'';
import { ConfirmationDialog } from ''./confirm-dialog/confirmation-dialog'';
@NgModule({
imports: [
...
FormsModule,
ReactiveFormsModule
],
declarations: [
...
ConfirmationDialog
],
providers: [ ... ],
bootstrap: [ AppComponent ],
entryComponents: [ConfirmationDialog]
})
export class AppModule { }
confirmación-dialog.ts
import { Component, Input } from ''@angular/core'';
import { MdDialog, MdDialogRef } from ''@angular/material'';
@Component({
selector: ''confirm-dialog'',
templateUrl: ''/app/confirm-dialog/confirmation-dialog.html'',
})
export class ConfirmationDialog {
constructor(public dialogRef: MdDialogRef<ConfirmationDialog>) {}
public confirmMessage:string;
}
confirmación-dialog.html
<h1 md-dialog-title>Confirm</h1>
<div md-dialog-content>{{confirmMessage}}</div>
<div md-dialog-actions>
<button md-button style="color: #fff;background-color: #153961;" (click)="dialogRef.close(true)">Confirm</button>
<button md-button (click)="dialogRef.close(false)">Cancel</button>
</div>
app.component.html
<button (click)="openConfirmationDialog()">Delete me</button>
app.component.ts
import { MdDialog, MdDialogRef } from ''@angular/material'';
import { ConfirmationDialog } from ''./confirm-dialog/confirmation-dialog'';
@Component({
moduleId: module.id,
templateUrl: ''/app/app.component.html'',
styleUrls: [''/app/main.css'']
})
export class AppComponent implements AfterViewInit {
dialogRef: MdDialogRef<ConfirmationDialog>;
constructor(public dialog: MdDialog) {}
openConfirmationDialog() {
this.dialogRef = this.dialog.open(ConfirmationDialog, {
disableClose: false
});
this.dialogRef.componentInstance.confirmMessage = "Are you sure you want to delete?"
this.dialogRef.afterClosed().subscribe(result => {
if(result) {
// do confirmation actions
}
this.dialogRef = null;
});
}
}
index.html => agregada siguiente hoja de estilo
<link rel="stylesheet" href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css">
puede usar window.confirm dentro de su función combinada con if condition
delete(whatever:any){
if(window.confirm(''Are sure you want to delete this item ?'')){
//put your delete method logic here
}
}
cuando llame al método de eliminación, aparecerá un mensaje de confirmación y cuando presione Aceptar, ejecutará toda la lógica dentro de la condición if.
ACTUALIZACIÓN: Plunkr añadido
Estaba buscando una solución en todos los foros, pero no encontré ninguna, así que encontré una solución con la función de devolución de llamada Javascript de Old School :-) Esta es una forma realmente simple y limpia de crear un cuadro de diálogo de confirmación y configurar las funciones de devolución de llamada para SÍ y NO. eventos.
He usado Bootrap CSS para Modal y un servicio de alerta con rxjs Subject.
Aquí está mi alert.component.html
<div *ngIf="message.type == ''confirm''" class="modal-body">
<div class="row">
<div class="col-md-12">
<h3 class="text-center">{{message.text}}</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-center">
<a (click)="message.noFn()">
<button class="btn btn-pm">No</button>
</a>
<a (click)="message.siFn()">
<button class="btn btn-sc" >Yes</button>
</a>
</p>
</div>
</div>
</div>
Y alert.component.ts
export class AlertComponent {
message: any;
constructor(
public router: Router,
private route: ActivatedRoute,
private alertService: AlertService,
) { }
ngOnInit() {
//this function waits for a message from alert service, it gets
//triggered when we call this from any other component
this.alertService.getMessage().subscribe(message => {
this.message = message;
});
}
¡La parte más importante está aquí! alert.service.ts
import { Injectable } from ''@angular/core'';
import { Router, NavigationStart } from ''@angular/router'';
import { Observable } from ''rxjs'';
import { Subject } from ''rxjs/Subject'';
@Injectable() export class AlertService {
private subject = new Subject<any>();
constructor(){}
confirm(message: string,siFn:()=>void,noFn:()=>void){
this.setConfirmation(message,siFn,noFn);
}
setConfirmation(message: string,siFn:()=>void,noFn:()=>void) {
let that = this;
this.subject.next({ type: "confirm",
text: message,
siFn:
function(){
that.subject.next(); //this will close the modal
siFn();
},
noFn:function(){
that.subject.next();
noFn();
}
});
}
getMessage(): Observable<any> {
return this.subject.asObservable();
}
}
Llama a la función desde cualquier componente.
this.alertService.confirm("You sure Bro?",function(){
//ACTION: Do this If user says YES
},function(){
//ACTION: Do this if user says NO
})