Angular 2 个弹出 window

Question

我正在尝试创建一个弹出窗口 window，它会在单击按钮时询问登录详细信息。

我的app.component看起来像

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: `mytemplate.html`
 })
export class AppComponent {}

在 index.html 中我提到了 jquery 和 bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

mytemplate.html:

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">start here</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form id="login-form">
<div class="modal-body">

<input id="username"  type="text" placeholder="Username" >
<input id="password" type="password" placeholder="Password">

</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
</div>

</div>
</form>
</div>

</div>

</div>
</div>

这非常适合我。但我想知道是否可以纯粹使用 angular2-modal 来做同样的事情？如果可以，有人可以指导我如何操作。

Answer 1

是的，但使用第三方组件（例如 PrimeNg）可能最简单... http://www.primefaces.org/primeng/#/dialog

它提供了一个易于使用的弹出组件。

如果您不能使用第 3 方组件，您可以只使用 css 样式来使 div 像弹出窗口一样。单击页面上的按钮时，您将使用 *ngIf 使 div 可见。 div 将包含一个按钮，如果 div 可见，也可以关闭该按钮。

您可以使用本博客中提到的 css 样式... http://www.w3schools.com/howto/howto_css_modals.asp

Answer 2

我用过angular2/modal，还不错。你必须创建一个自定义模态 window 来实现上层代码的输出。将您的登录代码放在单独的组件 (login.component.ts) 中，然后将此组件用作自定义模式。

关注这个笨蛋：http://embed.plnkr.co/mbPzd8/。请务必使用 angular2-modal@2.0.0-beta 并在安装后将 angular2-modal 模块添加到您的 AppModule 中。

使用以下 ts 和模板创建登录组件：

    import { Component } from '@angular/core';
    import { DialogRef, ModalComponent, CloseGuard } from 'angular2-modal';
    import { BSModalContext } from 'angular2-modal/plugins/bootstrap';

    @Component({
      selector: 'login',
      styles: [],
      template: `<div class="modal-content">
                 <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Login</h4>
                 </div>
                 <div class="modal-body">
                 <form id="login-form">
                 <div class="modal-body">

                 <input placeholder="Username" [(ngModel)]="model.username" name="username" #username="ngModel" required>
                </input>
                  <input placeholder="Password" [(ngModel)]="model.password" name="password" #password="ngModel" required>
                </input>

                </div>
                <div class="modal-footer">
                <div>
                <button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
                </div>`
    })
    export class LoginModal implements CloseGuard, ModalComponent<CustomModalContext> {
      context: CustomModalContext;

      public username: string;
      public password: string;

      constructor(public dialog: DialogRef<CustomModalContext>) {
        this.context = dialog.context; // this is the dialog reference
        dialog.setCloseGuard(this);
      }
    }

现在在应用程序组件中，我们将此模式称为 window。

import { Component } from '@angular/core';
import { LoginModal } from './login.component.ts';
import { Overlay, overlayConfigFactory } from 'angular2-modal';
import { Modal, BSModalContext } from 'angular2-modal/plugins/bootstrap';

@Component({
  selector: 'my-app',
  template: `<button (click)="openLoginDialog()">Login Modal</button>`
 })
export class AppComponent {
  constructor(public modal: Modal) {
  }

  openLoginDialog() {
    return this.modal.open(LoginModal,  overlayConfigFactory({}, BSModalContext));
  }
}

Angular 2 个弹出 window

Angular 2 popup window

popupwindow

bootstrap-modal

angular