Angular 2弹出窗口

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

我的app.component看起来像

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

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

在index.html中,我引用了jquery和bootstrap

mytemplate.html:

start here








×
Login











Login

这对我来说非常适合.但我想知道是否有可能纯粹使用angular2-modal？如果是这样,有人可以指导我如何这样做.

我用过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: `

                 

                 ×
                 
Login
                 
                 

                 

                 


                 
                
                  
                

                
                

                

                Login
                
`
    })
    export class LoginModal implements CloseGuard, ModalComponent {
      context: CustomModalContext;

      public username: string;
      public password: string;

      constructor(public dialog: DialogRef) {
        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: `Login Modal`
 })
export class AppComponent {
  constructor(public modal: Modal) {
  }

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