반응형
확인 대화 상자를 만드는 Angular 2 쉬운 방법
각도 2에서 확인 대화 상자를 만드는 그다지 복잡하지 않은 방법이 있습니까? 아이디어는 항목을 클릭 한 다음 삭제를 확인하기 위해 팝업 또는 모달을 표시하는 것입니다. 여기서 angular2-modal 에서 각도 2 모달을 시도 했지만 확인하거나 취소하면 어떻게되는지 모르겠습니다. 클릭 기능이 잘 작동하지만 유일한 문제는 사용 방법을 잘 모른다는 것입니다. 나는 또한 내가 사용하는 차이점과 동일한 플러그인을 가진 또 다른 모달을 가지고 있습니다.
this.modal.open(MyComponent);
그리고 확인 상자를 표시하기 위해 다른 구성 요소를 만들고 싶지 않습니다.
방법 1
확인하는 간단한 방법 중 하나는 기본 브라우저 확인 경고를 사용하는 것입니다. 템플릿에는 버튼 또는 링크가있을 수 있습니다.
<button type=button class="btn btn-primary" (click)="clickMethod('name')">Delete me</button>
그리고 컴포넌트 방법은 다음과 같을 수 있습니다.
clickMethod(name: string) {
if(confirm("Are you sure to delete "+name)) {
console.log("Implement delete functionality here");
}
}
방법 2
간단한 확인 대화 상자를 얻는 또 다른 방법은 ng-bootstrap 또는 ngx-bootstrap 과 같은 각도 부트 스트랩 구성 요소를 사용하는 것 입니다. 구성 요소를 설치하고 모달 구성 요소를 사용하기 만하면됩니다.
방법 3
아래는 angular2/material프로젝트에서 구현 한 것을 사용하여 간단한 확인 팝업을 구현하는 또 다른 방법 입니다.
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 { }
확인 -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;
}
confirm-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 => 다음 스타일 시트 추가
<link rel="stylesheet" href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css">
if 조건과 결합 된 함수 내부에서 window.confirm을 사용할 수 있습니다.
delete(whatever:any){
if(window.confirm('Are sure you want to delete this item ?')){
//put your delete method logic here
}
}
delete 메서드를 호출하면 확인 메시지가 팝업되고 ok를 누르면 if 조건 내의 모든 논리가 수행됩니다.
나는 파티에 꽤 늦었지만 여기에 ng-bootstrap을 사용하는 또 다른 구현이 있습니다 : https://stackblitz.com/edit/angular-confirmation-dialog
confirm-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;
}
}
확인 -dialog.component.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();
}
}
confirm-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>
다음과 같은 대화 상자를 사용하십시오.
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)'));
}
업데이트 : Plunkr 추가
나는 모든 포럼에서 해결책을 찾고 있었지만 아무것도 찾지 못했기 때문에 Old School Javascript 콜백 기능으로 해결책을 찾았습니다. :-) 이것은 확인 대화 상자를 만들고 YES 및 NO 클릭 모두에 대해 콜백 기능을 설정하는 정말 간단하고 깨끗한 방법입니다. 이벤트.
rxjs 주제와 함께 모달 및 경고 서비스에 Bootrap CSS를 사용했습니다.
여기에 내 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>
그리고 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;
});
}
가장 중요한 부분은 여기입니다! 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();
}
}
모든 구성 요소에서 함수 호출
this.alertService.confirm("You sure Bro?",function(){
//ACTION: Do this If user says YES
},function(){
//ACTION: Do this if user says NO
})
플 런커 https://embed.plnkr.co/vWBT2nWmtsXff0MXMKdd/
다음은 자바 스크립트의 기본 확인 기능과 사용자 정의 Angular 지시문을 사용하는 약간 다른 방식입니다. 매우 유연하고 가볍습니다.
용법:
<button (hrsAreYouSure) (then)="confirm(arg1)" (else)="cancel(arg2)">
This will execute confirm if user presses Ok on the confirmation dialog, or cancel if they
hit Cancel
</button>
지령:
import {Directive, ElementRef, EventEmitter, Inject, OnInit, Output} from '@angular/core';
@Directive({
selector: '[hrsAreYouSure]'
})
export class AreYouSureDirective implements OnInit {
@Output() then = new EventEmitter<boolean>();
@Output() else = new EventEmitter<boolean>();
constructor(@Inject(ElementRef) private element: ElementRef) { }
ngOnInit(): void {
const directive = this;
this.element.nativeElement.onclick = function() {
const result = confirm('Are you sure?');
if (result) {
directive.then.emit(true);
} else {
directive.else.emit(true);
}
};
}
}
sweetalert를 사용할 수 있습니다 : https://sweetalert.js.org/guides/
npm install sweetalert --save
그런 다음 애플리케이션으로 가져 오기만하면됩니다.
import swal from 'sweetalert';
두 개의 인수를 전달하면 첫 번째 인수는 모달의 제목이되고 두 번째 인수는 텍스트가됩니다.
swal("Here's the title!", "...and here's the text!");
다중 모듈 애플리케이션에서 단일 확인 대화 상자 구현을 재사용하려면 대화 상자가 별도의 모듈에서 구현되어야합니다. 머티리얼 디자인과 FxFlex로이 작업을 수행하는 한 가지 방법이 있습니다. 두 가지 모두 다시 트리밍하거나 교체 할 수 있습니다.
먼저 공유 모듈 (./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 {
}
대화 구성 요소 (./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) {}
}
그런 다음 다른 모듈에서 사용할 수 있습니다.
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 {}
구성 요소의 클릭 핸들러는 다음 대화 상자를 사용합니다.
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');
}
}
를 그대로 사용하면 this.modal.open(MyComponent);이벤트를 구독 할 수있는 개체가 반환되지 않으므로 작업을 수행 할 수 없습니다. 이 코드는 이벤트를 구독 할 수있는 대화 상자를 만들고 엽니 다.
css와 html을 다시 잘라 내면 이것은 정말 간단한 구성 요소이지만 직접 작성하면 디자인과 레이아웃을 제어 할 수있는 반면 미리 작성된 구성 요소는 제어를 제공하기 위해 훨씬 더 무거워 야합니다.
참조 URL : https://stackoverflow.com/questions/41684114/angular-2-easy-way-to-make-a-confirmation-dialog
반응형
'programing' 카테고리의 다른 글
| Swift에서 문자열을 CGFloat로 변환 (0) | 2021.01.16 |
|---|---|
| Cordova 빌드 iOS 오류 : 'path / to / myApp.xcarchive'경로에서 아카이브를 찾을 수 없습니다. (0) | 2021.01.16 |
| 노드 오류 : SyntaxError : 예기치 않은 토큰 가져 오기 (0) | 2021.01.15 |
| 최고의 JavaScript 날짜 파서 및 포맷터? (0) | 2021.01.15 |
| 자바에서 KDTree 구현 (0) | 2021.01.15 |