Angular2.0でモーダルダイアログボックスを実装する方法

この記事は、Angular2.0でモーダルダイアログボックスを実装する方法を主に紹介し、Angular2.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 id="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を記録しますパート

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でselectコンポーネントの選択値メソッドを選択

$setとvue.js_vue.jsの配列更新メソッド

vueをvue-i18nと組み合わせて複数のバックグラウンドデータを実現言語切り替え方法

以上がAngular2.0でモーダルダイアログボックスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。