angular - Angular 2/4 的无模态/非模态窗口

Question

有人知道在 Angular 4 中创建无模态/非模态窗口的工具吗？

我以前用 ngPopup对于我的 angularJS 项目，但似乎没有 angular 4 的更新版本。

所以我正在寻找类似的东西，任何人都可以提供一些建议吗？

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

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