Angular2.0에서 모달 대화 상자를 구현하는 방법

이 글에서는 주로 Angular2.0에서 모달 대화 상자를 구현하는 방법을 소개하고, 모달 대화 상자를 구현하는 Angle2.0의 스타일, 인터페이스, 기능 및 기타 관련 조작 기술을 예제 형식으로 분석합니다. 이 글의 예제

Angular2.0에서 모달 대화 상자를 구현하는 방법을 설명합니다. 참고를 위해 모두와 공유합니다. 자세한 내용은 다음과 같습니다.

글을 쓸 때 가장 현명한 것은 스타일 선택이라고 생각합니다~

CSS 부분

.font {
 font-family: "Microsoft YaHei", Arial;
 font-size: 12px;
 color: #333333;
}
.ky-modal-content {
 min-width: 520px;
 min-height: 240px;
}
.ky-modal-header {
 /*height : 40px;*/
 padding: 0 10px 0 10px;
}
.ky-modal-title {
 font-size: 16px;
 font-weight: 100;
}
.ky-modal-body {
 min-height: 110px;
 text-align: center;
}
.ky-modal-footer {
 height: 30px;
 border-top: 0;
 text-align: -webkit-center;
}
.ky-modal-message {
 padding-left: 3px;
 vertical-align: middle;
}
.ky-modal-icon {
 font-size: 16px;
 vertical-align: middle;
}
.ky-modal-question-icon {
 color:#ff8000;
}
.ky-modal-check-icon {
 color:green;
}
.ky-modal-exclamation-icon {
 color:red;
}
.ky-modal-close {
 outline: none;
 font-size: 30px;
 margin-top: 8px;
 font-weight: 100;
 vertical-align: -webkit-baseline-middle;
}
.vertical-align-center {
 display: flex;
 display: -webkit-box;
 display: -moz-box;
 -webkit-box-align: center;
 -moz-box-align: center;
 text-align: -webkit-center;
}

HTML 부분

<p [id]="id" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
 <p class="modal-dialog">
 <p class="modal-content ky-modal-content">
  <p class="modal-header ky-modal-header">
  <button type="button" class="close ky-modal-close" data-dismiss="modal" aria-label="Close">
   <span style="position: fixed;right: 10px;top:-6px" aria-hidden="true">×</span>
  </button>
  <h4 class="modal-title ky-modal-title" >{{title}}</h4>
  </p>
  <p class="modal-body ky-modal-body vertical-align-center">
  <p>
   <span style="font-size:18px;"> <span style="color:#ff0000;"><i class="fa ky-modal-icon" [ngClass]="iconClass" aria-hidden="true"></i></span></span>
   <span class="ky-modal-message">{{message}}</span>
  </p>
  </p>
  <p class="modal-footer ky-modal-footer">
  <ky-button [type]="conformButtonType" data-dismiss="modal" (click)="confirmButtonDown()">{{confirmText}}</ky-button>
  <ky-button [type]="&#39;cancel&#39;" data-dismiss="modal" (click)="cancelButtonDown()">{{cancelText}}</ky-button>
  </p>
 </p>
 </p>
</p>

JS를 기록해 보세요. part

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
@Component({
 moduleId: module.id,
 selector: 'ky-modal',
 styleUrls: ['./ky-modal.css'],
 templateUrl: './ky-modal.component.html',
})
export class KyModalComponent implements OnInit {
 @Input() title:string = '';
 @Input() type:string = '';
 @Input() message:string = '';
 @Input() confirmText:string = '';
 @Input() cancelText:string = '';
 @Input() id:string;
 @Input() conformButtonType:string;
 iconType ='question';
 iconClass :any = {'fa-question-circle':false,
  'fa-check-circle':false,
  'fa-exclamation-circle':false};
 typeList = ['question', 'check', 'exclamation'];
 @Output() actionButtonDown = new EventEmitter();
 @Output() undoButtonDown = new EventEmitter();
 cancelButtonDown() {
  this.undoButtonDown.emit('event');
 }
 confirmButtonDown() {
  this.actionButtonDown.emit('event');
 }
 determine() {
  let that = this;
  if(that.type && _.contains(that.typeList,that.type)) {
   that.iconType = that.type;
  }
  that.iconClass[`fa-${that.iconType}-circle`] = true;
  that.iconClass[`ky-modal-${that.iconType}-icon`] = true;</span>
 }
 ngOnInit() {
  this.determine();
 }
}

위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

JQuery는 선택 구성 요소의 선택된 값 방법을 선택합니다

$set 및 vue.js_vue.js의 배열 업데이트 방법

vue는 vue-i18n과 결합되어 여러 배경 데이터를 얻습니다. 언어 전환 방법

위 내용은 Angular2.0에서 모달 대화 상자를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!