Angular 2/4的模态/非模态窗口

时间:2017-07-21 17:54:21

标签: angular

有没有人知道在Angular 4中创建 modaless /非模态窗口的工具?

我曾经使用ngPopup作为angularJS项目,但似乎没有角度4的更新版本。

所以我正在寻找类似的东西,有人可以提出一些建议吗?

注意:必须是MODALESS而不是模态窗口

1 个答案:

答案 0 :(得分:-1)

您可以查看Angular2 UI。它提供modals等等。

这是HTML模板部分:

<ngui-popup #popup></ngui-popup>
<br/>
  {{message}}
<br/>

<button (click)="openPopup('small', 'Hello Small Popup')">open small message popup</button>
<br/>

 <button (click)="openPopup('medium', 'Hello Medium Popup')">open medium message popup</button>
<br/>

这是组件部分:

import { Component, ViewChild } from '@angular/core';
  import { NguiPopupComponent, NguiMessagePopupComponent } from 'ngui-ui';

  export class popupComponent {
    @ViewChild(NguiPopupComponent) popup: NguiPopupComponent;
    message: string;

    openPopup(size, title) {
      this.popup.open(NguiMessagePopupComponent, {
        classNames: size,
        title: title,
        message: "This is message given using popup.open()",
        buttons: {
          OK: () => {
            this.message = "Ok button is pressed";
          },
          CANCEL: () => {
            this.message = "Cancel button is pressed";
            this.popup.close();
          }
        }
      });
    }
  }