Question

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

我的app.component看起来像

OutputArray

index.html中的

我引用了jquery和bootstrap

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

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

mytemplate.html：

<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>

这对我来说很有效。但我想知道是否有可能纯粹使用angular2-modal？如果是这样，有人可以指导我如何这样做。

Answer 1

我使用了angular2 / modal并且很好。您必须创建自定义模式窗口以实现高级代码的输出。将您的登录代码放在一个单独的组件（login.component.ts）中，然后将此组件用作自定义模式。

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

使用以下ts和模板创建一个Login组件：

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

现在在app组件中，我们可以调用这个模态窗口。

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

Answer 2

是的，但使用PrimeNg等第三方组件可能最容易...... http://www.primefaces.org/primeng/#/dialog

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

如果你不能使用第三方组件，你可以使用css样式使div像弹出窗口一样。当在页面上单击按钮时，您将使用* ngIf使div可见。 div会包含一个按钮，如果它可见，也会关闭div。

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

Angular 2弹出窗口

2 个答案: