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

Posted 2023-02-22

【中文标题】Angular 2 - 打开/关闭默认引导模式

【英文标题】：Angular 2 - Open/Close default bootstrap modal

【发布时间】：2017-04-23 12:49:27

【问题描述】：

我不想按照问题/答案Angular 2 Bootstrap Modal 和Angular 2.0 and Modal Dialog 中的建议使用angular2-bootstrap 或ng2-bs3-modal

现在。我知道什么打开和关闭引导模式。

显示在display: none; 和display: block; 之间切换 属性在div 上在aria-hidden="true" 和aria-hidden="false 之间切换

所以，我很自然地认为，如果我像[aria-hidden]="true" 那样绑定到aria-hidden 属性，我可以操纵它。但遗憾的是，我无法绑定到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

【问题讨论】：

你试过这个吗：aria-hidden="yourVariable"

@xe4me 不，抛出相同的Cannot bind to 'aria-hidden' since it isn't a known property of 'div'。虽然找到了答案

【参考方案1】：

好的，事实证明没有必要绑定到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 适合我的需要。

【参考方案2】：

你可以试试这样，创建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>

你也可以增强它:)

【讨论】：

除了一些错误的引导 css 类之外，这就像一个魅力。

如何在component.ts中调用modal

【参考方案3】：

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

可用配置

最大化窗口 最小化窗口 自定义尺寸， 自定义位置 窗口是可拖动的 是否屏蔽父窗口 窗口居中与否 将值传递给主窗口 将值从子窗口传递到父窗口 监听关闭父窗口中的子窗口 使用您的自定义监听器监听以调整事件大小 是否以最大尺寸打开 启用和禁用窗口大小调整 启用和禁用最大化 启用和禁用最小化

【参考方案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();

打开你可以使用相同的想法

【讨论】：

感谢您节省我的时间。