通过 Angular 上的 Typescript 显示 Bootstrap 模态

Question

所以这是一个有点松散的问题，希望有人能给我一些想法...... 我有一个 Angular 网站，人们可以在其中填写表格来注册活动。 人们还可以同时注册自己和其他人。

我试图解决的问题〜当一个人单击“添加另一张票”时，它会通过一种方法运行，该方法首先检查所有字段是否有效并且他们已勾选复选框（如果没有，则会出现一个警报框，告诉他们哪个字段有效）字段无效） 然后该方法检查是否有足够的门票来注册另一个人（这就是我目前正在做的事情 - 检查足够的门票）。 如果有足够的票证（用于注册其他人） - 那么该人将被添加到名为“与会者”的数组中，并清除表格 - 以添加更多人。

因此，当它检查是否有足够的票证（这是有效的）时 - 如果没有足够的票证来添加更多人，那么“添加另一张票证”按钮将被隐藏，会出现一个模式窗口（告诉他们没有更多的票证），所以用户所能做的就是点击“立即付款”（并为他们排队的人支付门票）。

由于“添加另一张票”按钮无法真正打开\显示模式，所以我试图让 ts 显示它。 现在（为了测试其他所有内容）我只有启动警报窗口的代码 - 但警报窗口很难看。

另请注意 - “添加另一张票证”（以及与会者字段）是子组件，而此屏幕的其余部分是父组件。 父组件具有此方法，当单击子组件上的按钮时会触发该方法。

public addAttendee(attendee: Attendee, waitlisted: boolean): void {
        //We only allow adding an attendee if all the fields are valid - so if fields aren't valid display error message & quit.
        console.log("Add attendee button clicked");
        this.attendeeComponent.AddAttendeeTermOfSale = true;
        if (!this.attendeeComponent.areTheseFieldsValid(true)) {
            this.areFormFieldsValid = false;
            this.errorMessages = this.invalidFieldsAttendee();
            //this.isAttendeeValid = false;
            return;
        } else {
            this.areFormFieldsValid = true;
            this.attendeeComponent.AddAttendeeTermOfSale = false; //we added an attendee with no validation error, so reset TermOFSale to false.
        }

        if (this.eventPassCapacityReached()){
            this.cantAddAdditionalAttendees(); 
            return;
            //check if enough passes.  if not, then display modal window.
        }
        //this.attendeeComponent.AddAttendeeTermOfSale
        if (this.isAttendeeCountExceedingEventCapacity()) {
            this.showEventCapacityExceedingErrorMessage();
            return;
        }...
    }

“EventPassCapacityReached”实际上检查是否有足够的门票..

public eventPassCapacityReached() {
        let attendeesBeingRegistered = this.attendees.length;
        attendeesBeingRegistered += 1;
        this.sumPass = this.sumPass - attendeesBeingRegistered;

        if (this.sumPass <=0)
            return true;
        else
            return false;
    }

所以我基本上想改变这个警报窗口..

public cantAddAdditionalAttendees() {
        this.attendeeComponent.isPassesSoldOut = true;
        alert("dam... this was the last ticket for the event");
        var AddAttendeeButton = (<HTMLElement>document.getElementById("AddAnotherAttendee"));
        AddAttendeeButton.style.display = "none";
    }

这是我在视图中的模态

<div class="modal fade" tabindex="-1" id="noPassesModal" role="dialog" aria-labelledby="noPassesModalLabel" aria-hidden="true" data-target="noPassesModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">No additional tickets available</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p>Unfortunately we don't have any additional tickets available for this event, and you wont be able to register additional people</p>
                            <p>If you have additional people who would like to come, we would suggest you contact our Events team via <a href="mailto:[email protected]">email</a> or by phone on 1800 161 236</p>
                        </div>
                        <div class="modal-footer">
                            <div class="row">
                                        <!--<div class="col align-self-start">
                                            <a href="mailto:[email protected]?subject=Please transfer my session registration for {{ sessionData ? sessionData.sessionName : '' }}"
                                                role="button" class="btn btn-primary btn-block">Transfer</a>
                                        </div>-->
                                <div class="col align-self-end">
                                    <button role="button" class="btn btn-secondary btn-block">OK</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

所以我想弄清楚如何让 TS 显示此模式（在“cantAddAdditionalAttendees”内）

Answer 1

显示模态的一种简单方法是使用 ts 文件中的布尔变量来管理它。

当您想显示模式时，您可以简单地将其设置为“true”。在 html 中，您必须将其放在模态 div 中的 *ngIf 中。

这样您就可以通过操作布尔变量来显示和隐藏模态。

当模态变得更大并包含更多逻辑时，将它们放入单独的组件中是有意义的。

另一种选择是使用 CDKComponentPortal 动态创建 Modal 组件。

但是使用布尔变量的建议方法应该适用于您的用例。