Angular 2弹出窗口

Question

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

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

我用过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));
  }
}