Question

我有一个使用ngx-bootstrap的Angular 5应用程序。我使用Modal Component创建了两个模态。我需要在一段时间后关闭第一个模态，然后打开第二个模态。

我在打开第二个模态之前尝试了这两个但是......

...当我在组件中使用this.modalService.hide(0)时，我会显示模态，没有任何反应
...当我在组件中使用this.modalService.hide(1)时我会显示模态，第二个模态在

this.modalReference.hide()也没有这样做。

任何建议都非常感谢！

Answer 1

我设法让您的方案使用以下实现

在app.component.html

中

<div bsModal #modalone="bs-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal ONe</h4>
            </div>
            <div class="modal-body">
                <button (click)="toggle()">Toggle</button>
            </div>
        </div>
    </div>
</div>

<div bsModal #modaltwo="bs-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal Two</h4>
            </div>
            <div class="modal-body">
                <button (click)="toggle()">Toggle</button>
            </div>
        </div>
    </div>
</div>

在上述模态部分中，注意两件重要的事情; 1）每个模态部分都通过bsModal引用模态指令2）有一个使用＃的元素节点的引用...此外，引用具有不同的名称是必要的......在这个例子中，我我们选择使用#modalone和#modaltwo。这里的每个引用都传递了ModalDirective的实例。

在app.component.ts中使用上面使用的引用名称的@ViewChild()装饰器获取模态元素的引用。（请参阅此处的完整文档https://angular.io/api/core/ViewChild）

 @ViewChild('modalone') public modalone: ModalDirective;
 @ViewChild('modaltwo') public modaltwo: ModalDirective;

 // Required to toggle
 one: boolean = true;

在ngAfterViewInit()生命周期钩子中，使用show()功能切换第一个模态。最初的show（）调用是在AfterViewInit生命周期钩子中执行的，以便拥有元素的节点。这将启用第一个模态。

ngAfterViewInit(): void {
    this.modalone.show();
}

添加一个简单的切换功能（在上面的模态html中引用）以在两个模态之间切换。

toggle() {
    if (this.one) {
        this.modalone.hide();
        this.modaltwo.show();
    } else {
        this.modalone.show();
        this.modaltwo.hide();
    }

    this.one = !this.one;
}

这应该证明你需要在两个模态之间切换......这是一个有效的笨蛋https://plnkr.co/edit/F5oWAI?p=preview

（ngx-bootstrap）关闭以编程方式使用组件创建的模式

1 个答案: