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不存在）

我知道使用$('#myModal').modal()的JQuery可以实现这一点，如此问题所示How to open a Bootstrap modal window using jQuery?

所以我的问题是，是否有一个TypeScript功能与JQuery的modal()做同样的事情，或者有没有办法将函数/变量绑定到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

您可以尝试这样的操作，创建32-bit Excel：

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

你也可以加强这个：）

Answer 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();

要打开，您可以使用相同的想法

Answer 3

我这样做了，它对我很有用。

var element = document.getElementById（“CloseButton”）as any;

element.click（）; 我的CloseButton是bootstrap关闭按钮

Answer 4

好的，事实证明没有必要绑定到aria-hidden，尽管我猜这应该是可能的。

目前的答案来自Angular 2.0 and Modal Dialog（但答案只有9个赞成票）

添加

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

尝试使用ng-window，它允许开发人员以简单的方式打开并完全控制单页面应用程序中的多个窗口，No Jquery，No Bootstrap。

Avilable Configration

Maxmize window
最小化窗口
自定义尺寸，
自定义位置
窗口可拖动
是否阻止父窗口
是否将窗口置于中心
将值传递给chield窗口
将值从chield窗口传递到父窗口
在父窗口中收听关闭的chield窗口
使用自定义侦听器收听调整大小事件
以最大尺寸打开
启用和禁用窗口大小调整
启用和停用最大化
启用和停用最小化

Angular 2 - 打开/关闭默认引导模式

5 个答案: