Angular에서 확인 대화 상자를 만드는 쉬운 방법은 무엇입니까?

Angular에서 확인 대화 상자를 만드는 쉬운 방법은 무엇입니까?

각도 2에서 확인 대화 상자를 만드는 그리 복잡하지 않은 방법이 있습니까? 항목을 클릭한 다음 삭제를 확인하기 위해 팝업이나 모달을 표시하는 아이디어입니다. 여기 각도 2 모달에서 각도 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과 같은 각진 부트스트랩 구성 요소를 사용하는 것입니다.구성 요소를 설치하고 모달 구성 요소를 사용하면 됩니다.

1. ng-bootstrap을 사용한 모델의 예
2. ngx-bootstrap을 사용한 모델의 예.

방법 3

는 아는간확인팝업구현또는하다방다법니입른을래단한▁using다▁a▁provided를 사용하여 간단한 팝업을 하는 또 입니다.angular2/material내 프로젝트에서 구현한 것입니다.

app.s.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 { }

confirmation-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;
}

confirmation-dialog.sys

<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.vmdk

<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.filename => 다음 스타일시트 추가

<link rel="stylesheet" href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css">

당신은 if 조건과 결합된 당신의 함수 안에 window.dll을 사용할 수 있습니다.

 delete(whatever:any){
    if(window.confirm('Are sure you want to delete this item ?')){
    //put your delete method logic here
   }
}

삭제 방법을 호출하면 확인 메시지가 팝업되고 ok를 누르면 if 조건 내의 모든 로직이 수행됩니다.

저는 파티에 꽤 늦었지만, 여기 ng-bootstrap을 사용한 다른 구현체가 있습니다: https://stackblitz.com/edit/angular-confirmation-dialog

confirmation-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;
  }

}

confirmation-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();
  }

}

confirmation-dialog.component.component

<div class="modal-header">
  <h4 class="modal-title">{{ title }}</h4>
    <button type="button" class="close" aria-label="Close" (click)="dismiss()">
      <span aria-hidden="true">&times;</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 Subject 파일 Modal 및 An Alert Service 파일 CSS 파일입니다.

alert.component.sys

        <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/

달콤한 경고를 사용할 수 있습니다. https://sweetalert.js.org/guides/

npm install sweetalert --save

그런 다음 응용 프로그램으로 가져오기만 하면 됩니다.

import swal from 'sweetalert';

두 개의 인수를 통과하면 첫 번째 인수는 모달의 제목이 되고 두 번째 인수는 텍스트가 됩니다.

swal("Here's the title!", "...and here's the text!");

Javascript의 기본 확인 기능과 사용자 지정 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);
      }
    };
  }
}

답변에 옵션을 추가합니다.

사용할 수 있습니다.npm i sweetalert2

스일을추는것잊마십오시지을가타하에 하는 것을 잊지 angular.json

"styles": [
         ...
          "node_modules/sweetalert2/src/sweetalert2.scss"
          ]

그런 다음 가져오기만 하면 됩니다.

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'


// CommonJS
const Swal = require('sweetalert2')

붐, 당신은 갈 준비가 되었습니다.

Swal.fire({
  title: 'Are you sure?',
  text: 'You will not be able to recover this imaginary file!',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, keep it'
}).then((result) => {
  if (result.value) {
    Swal.fire(
      'Deleted!',
      'Your imaginary file has been deleted.',
      'success'
    )
  // For more information about handling dismissals please visit
  // https://sweetalert2.github.io/#handling-dismissals
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    Swal.fire(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
  }
})

자세한 내용: - https://www.npmjs.com/package/sweetalert2

이것이 누군가에게 도움이 되기를 바랍니다.

감사해요.

항상 특정 프로젝트 요구 사항에 맞는 기능과 기능을 만드는 것이 좋지만, 우리는 종종 우리가 원하는 모든 사소한 것들을 코딩할 시간이 없습니다.직접 코딩하고 싶지 않다면 npm 패키지 @costydeveloper/ngx-awesome-pop으로 쉽게 수행할 수 있습니다.

다음과 같은 방법으로 패키지에서 Confirm Box 모듈만 구현할 수 있습니다.

app.module.ts에서

    import {NgModule} from '@angular/core';
    import {BrowserModule} from '@angular/platform-browser';
    import {AppComponent} from './app.component';
    
    // Import your library
    import {ConfirmBoxConfigModule, NgxAwesomePopupModule} from '@costlydeveloper/ngx-awesome-popup';
    
    
    @NgModule({
        declarations: [
            AppComponent
        ],
        imports     : [
            BrowserModule,
    
            // Import popup and confirm box module
            NgxAwesomePopupModule.forRoot(),
            ConfirmBoxConfigModule.forRoot()
        ],
        providers   : [],
        bootstrap   : [AppComponent]
    })
    export class AppModule {
    }

그런 다음 다음 다음과 같은 방법으로 텍스트 코드의 아무 곳에서나 호출합니다.

     confirmBox() {
            const confirmBox = new ConfirmBoxInitializer();
            confirmBox.setTitle('Are you sure?');
            confirmBox.setMessage('Confirm to delete user: John Doe!');
            // Set button labels, the first argument for the confirmation button, and the second one for the decline button.
            confirmBox.setButtonLabels('YES', 'NO');
            
            confirmBox.setConfig({
                DisableIcon: true, // optional
                AllowHTMLMessage: false, // optional
                ButtonPosition: 'center', // optional
                // Evoke the confirmation box with predefined types.
                LayoutType: DialogLayoutDisplay.DANGER // SUCCESS | INFO | NONE | DANGER | WARNING
            });
            
            // Simply evoke the popup and listen which button is clicked.
            const subscription = confirmBox.openConfirmBox$().subscribe(resp => {
                // IConfirmBoxPublicResponse
                console.log('ConfirmBox button response: ', resp);
                subscription.unsubscribe();
            });
        }

다음과 같은 결과를 가져옵니다.

다중 모듈 응용 프로그램에서 단일 확인 대화 상자 구현을 재사용하려면 대화 상자를 별도의 모듈에 구현해야 합니다.재료 설계 및 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/easy-way-to-make-a-confirmation-dialog-in-angular