Angular 2-打开/关闭默认引导程序模式 [英] Angular 2 - Open/Close default bootstrap modal

问题描述

我不想使用 angular2-bootstrap 或 Angular 2引导程序模式和

I do not want to use angular2-bootstrap or ng2-bs3-modal as suggested in the questions/answers Angular 2 Bootstrap Modal and Angular 2.0 and Modal Dialog

现在.我知道打开和关闭引导程序模式的内容.

Now. I know what opens and closes the bootstrap modal.

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

• The display is toggled between display: none; and display: block;
• An attribute toggles on the div between aria-hidden="true" and aria-hidden="false

所以，自然地，我想如果我像[aria-hidden]="true"这样绑定到aria-hidden属性，就可以操纵它.但是，令人遗憾的是，由于它不是div的已知属性，因此无法绑定到aria-hidden. (请注意，attr.aria-hidden不存在)

So, naturally I thought that if I bound to the aria-hidden attribute like so [aria-hidden]="true", that I could manipulate it. Sadly though, I cannot bind to aria-hidden since it isn't a known property of div. (note, attr.aria-hidden doesn't exist)

我确实知道使用$('#myModal').modal()的JQuery可以实现此问题，如此问题

I do know that this is possible with JQuery with $('#myModal').modal() as shown in this question How to open a Bootstrap modal window using jQuery?

所以我的问题是，是否有TypeScript功能与JQuery中的modal()相同，或者是否有将功能/变量绑定到aria-hidden的方法?

So my question is, is there a TypeScript functionality that does the same thing as modal() from JQuery, or is there a way to bind a function/variable to 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

推荐答案

您可以尝试执行以下操作，创建myModal.html:

You can try something like this, create 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;
}

然后为此创建模块，以便您可以在任何地方使用它，并可以在任何地方使用它，如下所示:

then create module for this so that you can use anywhere and use it anywhere like this:

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

您也可以增强此功能:)

You can enhance this also :)

这篇关于Angular 2-打开/关闭默认引导程序模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！