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

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;
}

这应该会根据您的需要演示两个模态之间的切换...这是一个有效的 plunker https://plnkr.co/edit/F5oWAI?p=preview

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

(ngx-bootstrap) Close a modal that has been created with a component programmatically

ngx-bootstrap

angular

ngx-bootstrap-modal