Angular2如何打开模态弹出窗口

Question

请帮助我如何在 Ang2 代码的帮助下打开 Bootstrap 模型弹出窗口

<button class="btn btn-primary btn-sm"(click)="ModelFade()">ModelPopup</button>
    <div *ngIf="visible" >
        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <p>Some text in the modal.</p>
                    </div>
                </div>
            </div>
        </div>

我为 *ngIf="visible" 写了简单的代码作为

 public visible = false;
    public visibleAnimate = false;
    ModelFade(): void {
        this.visible = true;
        setTimeout(() => this.visibleAnimate = true, 300);
    }

Answer 1

如果您将 html 更改为此，它应该切换显示/隐藏。

<button class="btn btn-primary btn-sm" (click)="visible = visible ? false : true">ModelPopup</button>
        <div *ngIf="visible" >
            <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Modal Header</h4>
                        </div>
                        <div class="modal-body">
                            <p>Some text in the modal.</p>
                        </div>
                    </div>
                </div>
            </div>

Angular2如何打开模态弹出窗口

Angular2 How to open Modelpopup

twitter-bootstrap

angular2-forms