Angular 2 - Открыть/закрыть загрузку по умолчанию

Ответ 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>

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

Ответ 2

если ваш модальный имеет кнопку отмены (иначе создайте скрытую кнопку закрытия). Вы можете имитировать событие клика на этой кнопке, чтобы ваша форма была закрыта. В вашем компоненте добавьте 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();

Чтобы открыть, вы можете использовать ту же идею

Ответ 3

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

Текущий ответ получен из Angular 2.0 и модального диалога (но ответ только с 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, подходит для моих потребностей.

Ответ 4

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

Avilable Configivity

• Окно Maxmize
• Свернуть окно
• Нестандартный размер,
• Пользовательская позиция
• окно можно перетаскивать
• Блокировать родительское окно или нет
• Центрировать окно или нет
• Передать значения для окна с закрытием
• Передать значения из окна доступа к родительскому окну
• Прослушивание окна закрывающего закрытия в родительском окне
• Слушайте изменение размера события с помощью своего пользовательского прослушивателя
• Открыть с максимальным размером или нет
• Включение и отключение изменения размера окна
• Включение и отключение максимизации
• Включение и отключение минимизации