angular2-template - angular2 如何打开 Bootstrap4 beta2 modelpopup

Question

请帮助我如何使用 Angular2 代码弹出 Bootstrap4 Beta2 模型弹出窗口。在这里我不想使用 Jquery 代码这是我从 getbootstrap.com 复制的一些代码

<div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div> 

Answer 1

您可以只使用现有的方法，例如显示和隐藏

<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: true}"
         tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title pull-left">Static modal</h4>
            <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            This is static modal, backdrop click will not close it.
            Click <b>&times;</b> to close modal.
          </div>
        </div>
      </div>
    </div>

DEMO