3

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

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

  • ...当我this.modalService.hide(0)在显示模态的组件中使用时，没有任何反应
  • ...当我this.modalService.hide(1)在显示模态的组件中使用时，第二个模态会在之后立即打开和关闭

也this.modalReference.hide()没有做到。

任何建议高度赞赏！

4

1 回答 1

3

我设法让您的场景使用以下实现

在 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）每个模态部分都有一个对模态指令的引用，通过bsModal2）有一个使用 # 的元素节点的引用......此外，引用必须具有不同的名称......在这个例子中，我选择使用#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

于 2017-12-12T09:49:08.250 回答