Angular 2 popup window

Question

Я пытаюсь создать всплывающее окно, которое запрашивает данные для входа в систему при нажатии кнопки.

мой app.component выглядит

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

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

в index.html я называется JQuery и самонастройки

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

Это отлично работает для меня , но я хочу знать, можно ли сделать то же самое с использованием углового2-модального? если так, кто-то может мне помочь, как это сделать.

Answer 1

Я использовал angular2/модальность и ее хорошо. Вы должны создать собственное модальное окно, чтобы получить вывод верхнего кода. Поместите свой код входа в отдельный компонент (login.component.ts), а затем используйте этот компонент как пользовательский модальный.

Следуйте за этим плунжером: http://embed.plnkr.co/mbPzd8/. Обязательно используйте angular2-modal@2.0.0-beta и добавьте модуль Angular2-modal в AppModule после установки.

Создать Войти компонент со следующими ц и шаблона:

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

И теперь в приложении компонент, назовём это модальное окно.

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-действие подобно всплывающему окну. Когда на странице нажата кнопка, вы должны сделать div видимым, используя * ngIf. В div будет кнопка, которая также закроет div, если она будет видна.

Вы можете использовать стили CSS, которые упомянуты в этом блоге ... http://www.w3schools.com/howto/howto_css_modals.asp