angular - (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() 生命周期 Hook 中，使用 show() 函数切换第一个模式。初始 show() 调用在 AfterViewInit 生命周期 Hook 内执行，以便获得元素的节点。这将启用第一个模式。

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