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如何打开Modelpopup

1 个答案: