Угловое 2 - Открыть/Закрыть по умолчанию начальной загрузки модальный

Question

Я не хочу использовать angular2-bootstrap или ng2-bs3-modal как предложено в вопросах/ответы Angular 2 Bootstrap Modal и Angular 2.0 and Modal Dialog

Сейчас. Я знаю, что открывает и закрывает загрузочный модальный.

• Дисплей переключается между display: none; и display: block;
• Атрибут переключает на div между aria-hidden="true" и aria-hidden="false

Таким образом, естественно, я подумал, что если я связан с aria-hidden атрибут как так [aria-hidden]="true", что я могу манипулировать им. К сожалению, я не могу привязываться к aria-hidden, так как это не известное свойство div. (Обратите внимание, что attr.aria-hidden не существует)

Я знаю, что это возможно с помощью JQuery с $('#myModal').modal(), как показано в этом вопросе How to open a Bootstrap modal window using jQuery?

Так что мой вопрос, есть ли функциональность машинописи, что делает то же самое, modal() от JQuery, или есть способ привязать функцию/переменную к aria-hidden?

Мой текущий html:

<div id="createAccountModal" class="modal fade customForm" role="dialog" [aria-hidden]="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4>Create account</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Lorem ipsum</P> 
      </div> 
      <div class="modal-footer align-left"> 
       My custom footer 
      </div> 
     </div> 
    </div> 
</div 

Answer 1

Вы можете попробовать что-то вроде этого, создать myModal.html:

<div class="modal-backdrop fade in" [style.display]="showModal ? 'block' : 'none'"></div> 
    <div class="modal" tabindex="-1" role="dialog" style="display: block" [style.display]="showModal ? 'block' : 'none'"> 
    <div class="modal-dialog"> 
     <div class="modal-popup"> 
      <div class="popup-title"> 
      <span>{{title}} </span> 
      <i class="icon-cancel fr" data-dismiss="modal" aria-label="Close" (click)="cancelAction()"></i> 
      <p *ngIf="subTitle">{{subTitle}}</p> 
      </div> 
     <ng-content></ng-content> 
     </div> 
    </div> 
</div> 

затем создайте myModal.component.ts:

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; 

const template: string = require('./myModal.html'); 

@Component({ 
    selector: 'modal', 
    template 
}) 

export class Modal implements OnInit { 
    @Input('show-modal') showModal: boolean; 
    @Input('title') title: string; 
    @Input('sub-title') subTitle: string; 
    @Input('cancel-label') cancelLabel: string; 
    @Input('positive-label') positiveLabel: string; 

    @Output('closed') closeEmitter: EventEmitter <ModalResult> = new EventEmitter <ModalResult>(); 
    @Output('loaded') loadedEmitter: EventEmitter <Modal> = new EventEmitter <Modal>(); 
    @Output() positiveLabelAction = new EventEmitter(); 

    constructor() {} 

    ngOnInit() { 
    this.loadedEmitter.next(this); 
    } 

    show() { 
    this.showModal = true; 
    } 

    hide() { 
    this.showModal = false; 
    this.closeEmitter.next({ 
     action: ModalAction.POSITIVE 
    }); 
    } 

    positiveAction() { 
    this.positiveLabelAction.next(this); 
    return false; 
    } 

    cancelAction() { 
    this.showModal = false; 
    this.closeEmitter.next({ 
     action: ModalAction.CANCEL 
    }); 
    return false; 
    } 
} 

export enum ModalAction { POSITIVE, CANCEL } 

export interface ModalResult { 
    action: ModalAction; 
} 

затем создать модуль для этого, так что вы можете использовать в любом месте и использовать его в любом месте например:

<modal #deleteUserModal id="deleteUser" 
    [show-modal]="isModalOpen" 
    [title]="'Delete'" 
    > 
    <div class="popup-content"> 
    <p>Are you sure you want to delete the user permanently?</p> 
    </div> 
    <div class="popup-footer"> 
    <button class="btn cancel" aria-label="Close" (click)="deleteUserModal.hide()"> 
     Cancel 
    </button> 
    <button type="button" class="btn btn-primary" (click)="deleteSelectedUser(deleteUserModal)" aria-label="Close"> 
     Delete 
    </button> 
    </div> 
</modal> 

Вы можете улучшить это также :)

Answer 2

Хорошо, оказывается, нет необходимости связываться с aria-hidden, хотя это должно быть возможно, я думаю.

В настоящее время пришел ответ от Angular 2.0 and Modal Dialog (но ответ только 9 upvotes)

Добавление

<div id="createAccountModal" class="modal fade customForm" role="dialog" [ngClass]="{'in': visibleAnimate}" 
     [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}"> 

Это на мой код, и имеющий (click) обработчик на кнопку переключения visible и visibleAnimate подходит мои потребности.

Answer 3

попробуйте использовать ng-window, это позволяет разработчику открывать и полностью управлять несколькими окнами в одностраничных приложениях простым способом, без Jquery, No Bootstrap.

Configration строения

• Maxmize окно
• Минимизация окна
• Пользовательский размер,
• Пользовательские posation
• окно dragable
• Блок родительского окна или не
• центр окна или нет
• значения Pass для chield окно
• значения Pass из chield окна в родительском окне
• Слушая закрытия chield окна в родительском окне
• Послушаю, чтобы изменить событие с пользовательской слушатель
• Открыть с максимальным размером или не
• Включение и отключение окна изменения размера
• Включение и отключение максимизация
• Включение и отключение минимизации

Answer 4

если ваш модальной имеет кнопку отмены (В противном случае создать скрытую кнопку закрытия). Вы можете имитировать событие клика на этой кнопке, чтобы ваша форма была закрыта. ИИН компонента добавить ViewChild

export class HelloComponent implements OnInit { 

@ViewChild('fileInput') fileInput:ElementRef; 

в вашей кнопки закрытия добавить #fileInput

<button class="btn btn-danger" #fileInput id="delete-node" name="button" data-dismiss="modal" type="submit">Cancelar</button> 

Если вы хотите, чтобы закрыть модальное программно вызвать событие щелчка на кнопке закрытия

this.fileInput.nativeElement.click(); 

Для того чтобы открыть вы можете использовать эту идею

Answer 5

Я сделал это так, и он отлично работает для меня.

var element = document.getElementById ("CloseButton") как любой;

элемент.click(); Где моя кнопка CloseButton - кнопка закрытия бутстрапа